Just one more thing: I’ve added a last slide to each Slider and added a Div and Textblock to it. Now everything works fine in Chrome and Firefox, but on Safari the text is not showing up. Please see the video below:
https://www.screenmailer.com/v/KBSWiVObawz9aJg
Is there any way how I can fix that too?
I’m using Safari Version 11.1.2 (13605.3.8)
Thanks for the support.
Best,
Jens
@Brando Did you have any chance to look into this? Is there any other webflow admin that can help with the above Safari bug/issue? Thanks a lot! Best, Jens
Hi @jensvahle
Thanks for pinging me on this — I didn’t notice that last comment on the thread. I’ve gone ahead and created a new thread for this post as it’s a separate unrelated issue 
It looks like you have this slide set to position: absolute which is breaking the slide’s default position:
Setting this back to position: relative will resolve the issue. Hope this helps!
@Brando just tried this, but how can I make sure the text keeps centered both vertical and horizontal?
Great question. I typically recommend nesting a div block within your slide. You can then keep the slide clear of all styles and instead apply the background image and other styles to the new nested div.
@Brando This is what I’ve been doing. But I’m using Text in Webflow, not an image. Can’t seem to work it out other than giving the slide absolute position.
Hi @jensvahle
Instead of absolute positioning the slide, you can set it back to the default and add a bit of padding to push the content to the center:
This will achieve the same affect without breaking the component.
Not ideal, but ok
Hi @Brando
there must be another fix. It doesn’t work the way you suggested either.
Could you look into this one more time?
I had to change the url to http://asome.webflow.io/
https://preview.webflow.com/preview/asome?preview=eb4200f3a872dd397cc6d8a9f1a6df35
It looks like you still have the slide positioned absolutely.
Again, I’d recommend changing this back to the default position: relative, then add some top padding.
I’ve tested this on my end and it looks like it resolves the issue in Safari.
@Brando There must be a way to set this up using flexbox no? It’s very complicated to change every wrapper class and set each text to be centered for each slider. Also it’s difficult to see if it’s really centered in the designer.
Also if you click throug all the sliders, there are some that show up in safari, how come this is the case?
See screenshot below:
There definitely is – I typically recommend nesting a plain div block within your slide. You can then keep the slide clear of all styles and instead apply the flexbox styles to your div and nest the content inside of it.
Editing the display settings or positioning of the slide itself will most times break the slider component as it relies on certain default styles to work out of the box.
It looks like that may be what’s happening in the above screenshot
It has the same styling tho. Also when I remove styling from the slide and give flexbox centered both vertically and horizontally to the div, the text remains on the top. see screenshot below:
@jensvahle so in safari your having issues. Its always good to have fallbacks I cannot test it for you because i can only view it in the editor. how ever when it comes to flexbox or any other fallbacks with browsers sometimes its as simple as adding custom class fallback to your header like the following for center.
.class-name {
margin: 0px;
padding:0px;
float: left;
width:100%;
position:absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:50%;
}
However I did notice that when selecting your text mask there is a positioning to body problem.
@jensvahle add your style tags to the css
and the name you give your style in webflow will show like this Slide Text but is actually .Slide-Text
Thanks Poliigon. The text is still positioned on top. Not centered.
