position absolute safari

• Remember me Not recommended on shared computers
• Customize with code
• Blog Entries
• Status Updates

Safari issue with positioning text using flex: works fine in chrome

By HelenCrozier , October 29, 2020 in Customize with code

Recommended Posts

HelenCrozier

Site URL: https://martine-emdur.squarespace.com/vanessa-stockard-artworks/after-christus

Link to comment

• Created 3 yr
• Last Reply 3 yr

In order to use position: absolute, one of the parent elements needs to be position: relative

You will also need to change bottom: 1% to bottom 0

You can use any parent element you like, that contains both the image and the text, but padding will have to be account for if you use something way up the chain.

This seems to work, but I am not sure if it will effect anything else on your page, its just one that I grabbed to give you an example:

[data-layout-label="Post Body"] {     position: relative; }

Edit, I also just noticed that you also have an issue between 601 and 640px wide, where the image disappears completely.

@rwp  thanks so much for checking this out. I'm still learning about position properties and how they work! I've had some help from someone on another forum who also suggested I needed the relative property in there as well!  I did notice the disappearing image when I was shrinking the page and am not quite sure why the mobile breakpoint was so low. I changed it to 768 and it has stopped doing the disappearing act!

This topic is now archived and is closed to further replies.

• What's new at Squarespace - April 2024
• AMA with CSS Expert- Ask your questions here!
• The Essential Ingredients for a Successful Restaurant Website
• Using Squarespace Extensions FAQ
• Existing user? Sign In
• Help Guides
• Upcoming Calendar
• Circle Live Episodes
• Circle Day 2023
• Circle Day 2022
• Referral Payments
• Create New...
• Squarespace Forum

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.

• Service Status
• @SquareSpaceHelp
• SquareSpace 5
• Hire A Designer
• Developer Platform
• Website Templates
• Website Design
• Domain Name Search
• Online Stores
• Website Marketing
• Terms of Service
• Privacy Policy

Safari abosulte position element rending issue on iOS 17 & macOS Sonoma

On Safari of iOS 17 and macOS Sonoma, I am encountering a layout problem where the .content element seems to be covering the .header element, resulting in unexpected rendering. This issue is not consistently reproducible across different devices or browsers.

Here's the HTML and CSS structure:

https://xs9627.github.io/iOS17-position-bug/

If remove overflow in .page , or make .content not scrollable, .header shows correct that overlap .content

Thank you for reporting this issue. I can reproduce, and have filed it in our bug tracker as https://bugs.webkit.org/show_bug.cgi?id=261302 .

Position is different on Safari than on Chrome

Hello Webflow community

I have the following problem: Two elements in my header are positioned perfectly when I look at the website on my Chrome browser. But on my client’s Safari browser, the elements are positioned far more right and are cut off at the right edge. Does anybody have an idea how to prevent this?

I positioned the elements absolute and set the left: and right: tag to auto so the element is always in the middle. Then, I added a custom margin to the left, so a specific part of the element is always in the middle. On Safari, it semms that this margin is a lot larger than on my Chrome browser.

Here is my site Read-Only: LINK

Servus Moritz,

First of all I would def recommend you to build this hero in a proper way instead of using all elements in absolute. If you would do followings i thing your problem will be solved.

• Create a container with max-width and 100% width inside of your section div (header)
• Add another div with flex and relative inside of your container for your headline and put it inside of it without using any absolute positioning and then adjust the margin as you want.

Other suggestions I can def suggest you would be:

• Optimise and resize your bg hero image for web (it is currently 3mb which is very huge)
• Improve the quality of your design

Best Barry aus Wien

Thanks a lot for your detailed feedback. I created a div with flex and realtive position so I didn’t need to use absolute position on the inner elements and this works just fine.

Thank you for the other suggestions, too!

Best, Moritz

Relatively positioned elements not being displayed in Safari

Greetings. Not sure if this belongs in the HTML forum or in here. Mods, please feel free to move at your desecration. Anyway…

I have a web page in which I am using an SVG clipping path applied to one of the page’s HTML elements.

SVG element:

HTML element the clipping path is applied to

CSS defining the clip

#clipMe { clip-path: url(#clip); -webkit-clip-path: url(#clip); width: 200px; height: 200px; background-color: red; }

On the same page, I have various elements, some of which are relatively positioned:

In Safari (8.0.4) only, these relatively positioned elements are not being displayed as long as the linkage from the #clipMe div to the clipPath (within the SVG element) is intact.

Latest versions of FF and Chrome display as expected.

Changing the position: property to anything other than relative displays everything as expected.

Disabling the clipping path (either by removing the SVG element all together or removing the clip-path: property from the CSS) displays everything as expected as well.

JSfiddle https://jsfiddle.net/daveh0/6jn6px4k/

Again, this is Safari only. It took me a while to isolate it down to being about the SVG clipping path and position: relative so I’m guessing there may other situations with similar results.

Has anyone run into this or have any suggestions for getting those relatively positioned <div> s to display?

Chrome and webkit often seem to have weird disappearing bugs. The usal fix is to trigger the 3d algorithm which in your case would be on the position:relative element.

Safari will now show the text.

If you add position:absolute to the svg then safari puts your relatively positioned text clipped inside the svg. It seems a very buggy implementation!!

As an aside veryold versions of Safari would hide all position:relative elements when position:relative was applied to the html element (although I can find no good reason why anyone would do that).

Awesome! That did the trick. Thanks much.

Is there any other way to force hardware acceleration? This solution fixes the issue with the element not being displayed at all and in turn causes a new one:

In my “real” implementation, have a pseudo-element (created via ::before) that needs to be overlapped by the relatively positioned element. To achieve this, I assign z-index: -1 to the pseudo-element. It works great until I add the -webkit-transform:translateZ(0) at which point the pseudo-element z-index seems to reset causing it to stack on top of the main element.

See it in action: http://jsfiddle.net/daveh0/64awcv0p/6/

Looks like i’m going to have to wrap each element in another relatively positioned DIV. Didn’t want to have to change/add extra markup but there does’t seem to be any way manipulate that stacking order once hardware acceleration kicks in.

Yes, unfortunately I think you are stuck with that approach as transformed elements become ‘atomic’ and you cannot get underneath them from within the same context.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

css bug only on safari browser

hi i'm developer, i want to ask for bug only in saffari browser, why when i'm working on css position absolute of child tag does'nt work if also his parent has position absolution. this is a big bug and need to fix in this browser.

saffari browser

Posted on Mar 29, 2014 2:21 AM

Posted on Mar 29, 2014 2:26 AM

simple example

<div>

<p></p>

</div>

div { position: absolute; }

p { position: absolute; }

p element will not be showen in display or will not be showen correctly, only on saffari this is happening,

should safari fix this problem or can someone tell me any solution

Loading page content

Page content loaded

Mar 29, 2014 2:26 AM in response to webdevelop88

Mar 29, 2014 6:30 PM in response to webdevelop88

What do you see with this?

<html>

<head>

<style>

</style>

</head>

<body>

<p>test</p>

</body>

</html>

Mar 29, 2014 9:53 PM in response to r_kazak

this is just one simple example here, to tell that is not working properly, because i can't writte my fully problem what i'm coding, but i will give you an example here.

open this link http://premiumlayers.com/demos/onepager/ and go to portfolio posts, see in chrome or any other browser and also in safari , hover effect problem you will see in saffari

Mar 30, 2014 10:47 AM in response to webdevelop88

I visited your example web page with safari 7.0.3, latest webkit Nightly build, Chrome, and Firefox I see the page and behaviors as the same in all four browsers.

The page loads, I see the 3 'banner' panels, and I see the 'Learn More' box, which switches between rectangle and rhombus on hovering over it.

The 'Learn More' box is viewable for two of the sliding panels and not so in the third. The arrows indicating the direction also displays display an effect while hovering over them.

I do not see the 'portfolio posts'. Is that under the 'Learn More' effect ?

Maybe you can try with a Nightly WebKit build?

Mar 30, 2014 2:08 PM in response to webdevelop88

webdevelop88 wrote: hover effect problem you will see in saffari

I'm sure the bug is in one of those almost 8000 lines of CSS. I suggest reducting that to only what you really need to display a page like that. I am guessing that you should probably delete about 7700 lines of CSS.

Mar 30, 2014 2:54 PM in response to etresoft

it's so strange for me why only in saffari should be this mistake in 7700 other css lines, why in others is working

Mar 30, 2014 5:07 PM in response to webdevelop88

webdevelop88 wrote: it's so strange for me why only in saffari should be this mistake in 7700 other css lines, why in others is working

Welcome to web development. This is a natural and completely predictable outcome from having too much complexity.

Also, my count of 8000 lines of CSS was wrong. I only counted those files that reported CSS errors due to your IE hacks. What you are attempting is drop-dead simple. It simply does not need 11644 lines of CCS, 13000 lines of Javascript, and all of Google Maps.

Mar 30, 2014 5:37 PM in response to webdevelop88

Yes, it's the use of IDEs/tools which make it easier to generate such pages, but when it comes to debugging then there is all this generated complexity to deal with.

So there really is no such thing as a free lunch! 😉

Please try in the latest WebKit nightly build. Then you can file a bug there to see if you get a response.

CSS Tutorial

Css advanced, css responsive, css examples, css references, css layout - the position property.

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

The position Property

The position property specifies the type of positioning method used for an element.

There are five different position values:

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

Here is the CSS that is used:

position: relative;

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

Advertisement

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Here is a simple example:

position: sticky;

An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top , right , bottom or left for sticky positioning to work.

In this example, the sticky element sticks to the top of the page ( top: 0 ), when you reach its scroll position.

Positioning Text In an Image

How to position text over an image:

Try it Yourself:

More Examples

Set the shape of an element This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.

Test Yourself With Exercises

Position the <h1> element to always be 50px from the top, and 10px from the right, relative to the window/frame edges.

Start the Exercise

All CSS Positioning Properties

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-position][css-tables] position doesn’t apply on <tr> either #1899

LeaVerou commented Oct 23, 2017

• 👍 7 reactions

Loirooriol commented Oct 23, 2017

Sorry, something went wrong.

FremyCompany commented Oct 23, 2017

• 👍 29 reactions

FremyCompany commented Oct 23, 2017 • edited

Leaverou commented oct 25, 2017.

SelenIT commented Oct 27, 2017

• 👍 1 reaction

fantasai commented Jan 16, 2018

• 👍 8 reactions
• 👎 4 reactions

SelenIT commented Jan 16, 2018

Fremycompany commented jan 16, 2018.

FremyCompany commented Jan 24, 2018

SebastianZ commented Mar 2, 2020

tabatkins commented Apr 29, 2020

atotic commented Apr 26, 2021

• 🎉 8 reactions

FremyCompany commented Apr 27, 2021

renatodeleao commented May 9, 2021 • edited

• 👍 3 reactions
• 😕 6 reactions

renyuns commented Aug 6, 2021

nichita-pasecinic commented Jun 28, 2022

• 👍 5 reactions

SebastianZ commented Jun 29, 2022

Amooryjubran commented Aug 17, 2022

• 👀 1 reaction

kinglozzer commented Aug 31, 2022

• 👍 11 reactions
• 😕 1 reaction

andylacko commented Sep 9, 2022

BillyG83 commented Jun 1, 2023

Techn1x commented Aug 23, 2023 • edited

HonzaKopecky commented Oct 13, 2023

AlexanderDom commented Dec 11, 2023

Loirooriol commented dec 11, 2023.

No branches or pull requests

Safariだけ、なぜかずれるスタイルを修正する方法

サイトを制作している時、Chrome と Safari でスタイルがずれてしまうこと、ありませんか？

今回は、Safari のみスタイルを修正する方法を紹介します。

例えば、下の画像では、CSS で全く同じスタイルを指定しているのですが、『Powered by Azukipan』の位置がずれています。

特に、position: absolute;の場合、ブラウザの環境により位置がずれることがあります。

その場合、以下のコードで Safari のみ異なるスタイルを指定することができます。

試しに、『Powered by Azukipan』のスタイルを修正してみます。

さらに、Safari 用のコードを追加します。

Chrome のスタイルは変わらず、Safari のみ『Powered by Azukipan』の位置を調整することができました。

Safari のスタイルがずれてお困りの方は、ぜひ試してみてください。

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

• HTML&CSS
• Ruby on Rails

【React】Zustandで、簡単に状態管理する

2023年01月09日

【Ruby on Rails】登録フォームを作成し、データベースを保存する

2022年08月23日

【Ruby on Rails】ルーティングを設定する

2022年08月17日

【Ruby on Rails】データベースの内容をブラウザに表示する

2022年08月16日

【Ruby on Rails】rails consoleを使い、データベースを追加する

2022年08月12日

© 2024 あずきぱんウェブスタジオ