Ufdjrw

What wound would be of little consequence to a biped but terrible for a quadruped?

Does splitting a potentially monolithic application into several smaller ones help prevent bugs?

Is all copper pipe pretty much the same?

Life insurance that covers only simultaneous/dual deaths

Straight line with arrows and dots

Why don't MCU characters ever seem to have language issues?

Co-worker team leader wants to inject the crap software product of his friends into our development. What should I say to our common boss?

Am I not good enough for you?

Silly Sally's Movie

Is having access to past exams cheating and, if yes, could it be proven just by a good grade?

Is it true that real estate prices mainly go up?

When two POV characters meet

What is the likely impact on flights of grounding an entire aircraft series?

Prove that the total distance is minimised (when travelling across the longest path)

When were linguistics departments first established

How to deal with a cynical class?

Sword in the Stone story where the sword was held in place by electromagnets

Good allowance savings plan?

Provisioning profile doesn't include the application-identifier and keychain-access-groups entitlements

My story is written in English, but is set in my home country. What language should I use for the dialogue?

Making a sword in the stone, in a medieval world without magic

"However" used in a conditional clause?

What is the difference between "shut" and "close"?

Can "semicircle" be used to refer to a part-circle that is not a exact half-circle?

Fixed position in Safari

0

0

The child fixed positioned element is not visible in Safari.

.parent 
 position: fixed;
 width: 70%;
 height: 60%;
 overflow: auto;
 background: red;


.child 
 position: fixed;
 top: 10%;
 right: 10%;
 background: blue;



<div class="parent">
 Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
 <div class="child">Close</div>
</div>

Is there any CSS property that can make it visible in Safari? Any help will be highly appreciated.

html css

share|improve this question

edited Mar 6 at 17:39

Dipak

asked Mar 6 at 12:25

DipakDipak

10.1k12228

add a comment | 

0

0

The child fixed positioned element is not visible in Safari.

.parent 
 position: fixed;
 width: 70%;
 height: 60%;
 overflow: auto;
 background: red;


.child 
 position: fixed;
 top: 10%;
 right: 10%;
 background: blue;



<div class="parent">
 Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
 <div class="child">Close</div>
</div>

Is there any CSS property that can make it visible in Safari? Any help will be highly appreciated.

html css

share|improve this question

edited Mar 6 at 17:39

Dipak

asked Mar 6 at 12:25

DipakDipak

10.1k12228

add a comment | 

The child fixed positioned element is not visible in Safari.

.parent 
 position: fixed;
 width: 70%;
 height: 60%;
 overflow: auto;
 background: red;


.child 
 position: fixed;
 top: 10%;
 right: 10%;
 background: blue;



<div class="parent">
 Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
 <div class="child">Close</div>
</div>

Is there any CSS property that can make it visible in Safari? Any help will be highly appreciated.

html css

share|improve this question

edited Mar 6 at 17:39

Dipak

asked Mar 6 at 12:25

DipakDipak

10.1k12228

.parent 
 position: fixed;
 width: 70%;
 height: 60%;
 overflow: auto;
 background: red;


.child 
 position: fixed;
 top: 10%;
 right: 10%;
 background: blue;



<div class="parent">
 Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
 <div class="child">Close</div>
</div>

share|improve this question

edited Mar 6 at 17:39

Dipak

asked Mar 6 at 12:25

DipakDipak

10.1k12228

share|improve this question

edited Mar 6 at 17:39

Dipak

asked Mar 6 at 12:25

DipakDipak

10.1k12228

asked Mar 6 at 12:25

DipakDipak

10.1k12228

asked Mar 6 at 12:25

DipakDipak

10.1k12228

2 Answers
2

active

oldest

votes

0

Try this and let me know if it helped.

add -webkit-transform: translateZ(0); to your script like this:

.child 
 position: fixed; 
 top: 10%; 
 right: 10%; 
 background: blue; 
 -webkit-transform: translateZ(0);

share|improve this answer

answered Mar 6 at 12:31

Miguel CruzMiguel Cruz

56311

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It doesn't. I tried that option. Thank you.
  
  – Dipak
  Mar 6 at 12:35
  
  

  
  
  
  

add a comment | 

0

Yes, change the child position to absolute;

.child 
 position: absolute;
 top: 10%;
 right: 10%;
 background: blue;

You'll notice, in Safari, the element is actually there but you have overflow set on your parent div. And since the child element is fixed, overflow doesn't apply to it and I believe a fixed element within another fixed element still brings it out of document flow and positions it against the DOM - but still respects the parent element width.

Remove overflow: auto from your parent div and you'll see the child div.

Here's some more reading on nested fixed elements:
CSS: position:fixed inside of position: fixed

Edit:
If the child has to be fixed, you might have to consider changing your markup:

.parent 
 position: fixed;
 width: 100%;
 height: 60%;


.content 
 position: fixed;
 width: 70%;
 height: 60%;
 background: red;
 overflow: auto;


.child 
 position: fixed;
 top: 10%;
 right: 10%;
 background: blue;

<div class="parent">
 <div class="content">
 Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
 </div>
 <div class="child">Close</div>
</div>

share|improve this answer

edited Mar 6 at 18:41

answered Mar 6 at 17:51

disinfordisinfor

3,04511828

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's not an option. The child and parent both have to be fixed.
  
  – Dipak
  Mar 6 at 18:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Dipak As you can see, the overflow is causing this issue on Safari. I added an updated version with a markup change.
  
  – disinfor
  Mar 6 at 18:37
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! I had this in mind but unfortunately I cannot change the markup.
  
  – Dipak
  Mar 7 at 5:53
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55023088%2ffixed-position-in-safari%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Try this and let me know if it helped.

add -webkit-transform: translateZ(0); to your script like this:

.child 
 position: fixed; 
 top: 10%; 
 right: 10%; 
 background: blue; 
 -webkit-transform: translateZ(0);

share|improve this answer

answered Mar 6 at 12:31

Miguel CruzMiguel Cruz

56311

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It doesn't. I tried that option. Thank you.
  
  – Dipak
  Mar 6 at 12:35
  
  

  
  
  
  

add a comment | 

0

Try this and let me know if it helped.

add -webkit-transform: translateZ(0); to your script like this:

.child 
 position: fixed; 
 top: 10%; 
 right: 10%; 
 background: blue; 
 -webkit-transform: translateZ(0);

share|improve this answer

answered Mar 6 at 12:31

Miguel CruzMiguel Cruz

56311

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It doesn't. I tried that option. Thank you.
  
  – Dipak
  Mar 6 at 12:35
  
  

  
  
  
  

add a comment | 

Try this and let me know if it helped.

add -webkit-transform: translateZ(0); to your script like this:

.child 
 position: fixed; 
 top: 10%; 
 right: 10%; 
 background: blue; 
 -webkit-transform: translateZ(0);

share|improve this answer

answered Mar 6 at 12:31

Miguel CruzMiguel Cruz

56311

.child 
 position: fixed; 
 top: 10%; 
 right: 10%; 
 background: blue; 
 -webkit-transform: translateZ(0);

share|improve this answer

answered Mar 6 at 12:31

Miguel CruzMiguel Cruz

56311

answered Mar 6 at 12:31

Miguel CruzMiguel Cruz

56311

answered Mar 6 at 12:31

Miguel CruzMiguel Cruz

56311

0

Yes, change the child position to absolute;

.child 
 position: absolute;
 top: 10%;
 right: 10%;
 background: blue;

You'll notice, in Safari, the element is actually there but you have overflow set on your parent div. And since the child element is fixed, overflow doesn't apply to it and I believe a fixed element within another fixed element still brings it out of document flow and positions it against the DOM - but still respects the parent element width.

Remove overflow: auto from your parent div and you'll see the child div.

Here's some more reading on nested fixed elements:
CSS: position:fixed inside of position: fixed

Edit:
If the child has to be fixed, you might have to consider changing your markup:

.parent 
 position: fixed;
 width: 100%;
 height: 60%;


.content 
 position: fixed;
 width: 70%;
 height: 60%;
 background: red;
 overflow: auto;


.child 
 position: fixed;
 top: 10%;
 right: 10%;
 background: blue;

<div class="parent">
 <div class="content">
 Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
 </div>
 <div class="child">Close</div>
</div>

share|improve this answer

edited Mar 6 at 18:41

answered Mar 6 at 17:51

disinfordisinfor

3,04511828

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's not an option. The child and parent both have to be fixed.
  
  – Dipak
  Mar 6 at 18:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Dipak As you can see, the overflow is causing this issue on Safari. I added an updated version with a markup change.
  
  – disinfor
  Mar 6 at 18:37
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! I had this in mind but unfortunately I cannot change the markup.
  
  – Dipak
  Mar 7 at 5:53
  

  
  
  
  

add a comment | 

0

Yes, change the child position to absolute;

.child 
 position: absolute;
 top: 10%;
 right: 10%;
 background: blue;

You'll notice, in Safari, the element is actually there but you have overflow set on your parent div. And since the child element is fixed, overflow doesn't apply to it and I believe a fixed element within another fixed element still brings it out of document flow and positions it against the DOM - but still respects the parent element width.

Remove overflow: auto from your parent div and you'll see the child div.

Here's some more reading on nested fixed elements:
CSS: position:fixed inside of position: fixed

Edit:
If the child has to be fixed, you might have to consider changing your markup:

.parent 
 position: fixed;
 width: 100%;
 height: 60%;


.content 
 position: fixed;
 width: 70%;
 height: 60%;
 background: red;
 overflow: auto;


.child 
 position: fixed;
 top: 10%;
 right: 10%;
 background: blue;

<div class="parent">
 <div class="content">
 Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
 </div>
 <div class="child">Close</div>
</div>

share|improve this answer

edited Mar 6 at 18:41

answered Mar 6 at 17:51

disinfordisinfor

3,04511828

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's not an option. The child and parent both have to be fixed.
  
  – Dipak
  Mar 6 at 18:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Dipak As you can see, the overflow is causing this issue on Safari. I added an updated version with a markup change.
  
  – disinfor
  Mar 6 at 18:37
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! I had this in mind but unfortunately I cannot change the markup.
  
  – Dipak
  Mar 7 at 5:53
  

  
  
  
  

add a comment | 

Yes, change the child position to absolute;

.child 
 position: absolute;
 top: 10%;
 right: 10%;
 background: blue;

You'll notice, in Safari, the element is actually there but you have overflow set on your parent div. And since the child element is fixed, overflow doesn't apply to it and I believe a fixed element within another fixed element still brings it out of document flow and positions it against the DOM - but still respects the parent element width.

Remove overflow: auto from your parent div and you'll see the child div.

Here's some more reading on nested fixed elements:
CSS: position:fixed inside of position: fixed

Edit:
If the child has to be fixed, you might have to consider changing your markup:

.parent 
 position: fixed;
 width: 100%;
 height: 60%;


.content 
 position: fixed;
 width: 70%;
 height: 60%;
 background: red;
 overflow: auto;


.child 
 position: fixed;
 top: 10%;
 right: 10%;
 background: blue;

<div class="parent">
 <div class="content">
 Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
 </div>
 <div class="child">Close</div>
</div>

share|improve this answer

edited Mar 6 at 18:41

answered Mar 6 at 17:51

disinfordisinfor

3,04511828

.child 
 position: absolute;
 top: 10%;
 right: 10%;
 background: blue;

.parent 
 position: fixed;
 width: 100%;
 height: 60%;


.content 
 position: fixed;
 width: 70%;
 height: 60%;
 background: red;
 overflow: auto;


.child 
 position: fixed;
 top: 10%;
 right: 10%;
 background: blue;

<div class="parent">
 <div class="content">
 Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
 </div>
 <div class="child">Close</div>
</div>

.parent 
 position: fixed;
 width: 100%;
 height: 60%;


.content 
 position: fixed;
 width: 70%;
 height: 60%;
 background: red;
 overflow: auto;


.child 
 position: fixed;
 top: 10%;
 right: 10%;
 background: blue;

<div class="parent">
 <div class="content">
 Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
 </div>
 <div class="child">Close</div>
</div>

.parent 
 position: fixed;
 width: 100%;
 height: 60%;


.content 
 position: fixed;
 width: 70%;
 height: 60%;
 background: red;
 overflow: auto;


.child 
 position: fixed;
 top: 10%;
 right: 10%;
 background: blue;

<div class="parent">
 <div class="content">
 Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
 </div>
 <div class="child">Close</div>
</div>

share|improve this answer

edited Mar 6 at 18:41

answered Mar 6 at 17:51

disinfordisinfor

3,04511828

answered Mar 6 at 17:51

disinfordisinfor

3,04511828

answered Mar 6 at 17:51

disinfordisinfor

3,04511828