Skip to content
New issue

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

Jump to bottom

Safari position:fixed not compatible with push/pull columns #16814

Closed
enbo opened this issue Jul 13, 2015 · 11 comments
Closed

Safari position:fixed not compatible with push/pull columns #16814

enbo opened this issue Jul 13, 2015 · 11 comments
Labels
browser-bug confirmed css

Comments

@enbo
Copy link

enbo commented Jul 13, 2015

Objects with position: fixed do not get pulled or pushed like they should be when col-xs-push-6 or any other pull/push classes are used when viewing in iOS 8.4 Safari. This is not an issue in Explorer, Chrome, Opera, or Firefox to my knowledge.

You can see that the paragraph with "affix" is not pushed to the right like it should be in the example below. Depending on the viewport, the paragraph may be covered by the background color of the left column, since it comes later in the HTML.

http://jsbin.com/kuzenonexe/1/edit?html,css,output
http://jsbin.com/dakenacazi/1/edit?html,css,output

HTML:

<div class="container-fluid">
    <div class="row">
        <div id="pushed-col" class="col-xs-push-3 col-xs-9">
            <p>
                This is a paragraph.
            </p>
            <p class="affix">
                This is a paragraph with "affix". In a desktop browser, you can scroll to verify that its position is fixed.
            </p>
            <div class="extended-col">
            </div>
        </div>
        <div id="pulled-col" class="col-xs-pull-9 col-xs-3">
            <p>
            This is a paragraph from a column lower in the document.
            </p>
            <div class="extended-col">
            </div>
        </div>
    </div>
</div>

CSS:

#pulled-col {
  background-color: #ee9999;
}
#pushed-col {
  background-color: #99eeee;
}
.extended-col {
  display: block;
  content: "";
  height: 100vh;
}
@cvrebert cvrebert added the css label Jul 13, 2015
@cvrebert
Copy link
Collaborator

Your .col-*s need to be children of a .row, which in turn needs to be a descendant of a .container or .container-fluid. Dunno whether that affects your issue though.

@enbo
Copy link
Author

enbo commented Jul 14, 2015

Thanks, cvrebert. It doesn't fix the issue, but I've corrected the HTML.

@cvrebert
Copy link
Collaborator

I'm not sure what CSS dictates is supposed to happen if you just set position: fixed without any left/right/top/bottom like that (perhaps @mdo can enlighten me), but I can confirm that both iOS 8.4 Safari and OS X Safari 8.0.7 behave differently from IE11, Firefox, and Chrome on http://output.jsbin.com/yuxebo/2

Safari screenshot:
safari desktop

Chrome screenshot for comparison:
chrome

@cvrebert cvrebert changed the title iOS 8.4 position fixed not compatible with push/pull columns Safari position:fixed not compatible with push/pull columns Jul 24, 2015
@cvrebert
Copy link
Collaborator

Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=147284

@cvrebert
Copy link
Collaborator

Filed Apple Safari Radar problem: http://openradar.appspot.com/21993128

@cvrebert cvrebert mentioned this issue Jul 25, 2015
Merged
cvrebert added a commit that referenced this issue Jul 25, 2015
@cvrebert
Merge pull request #16881 from twbs/safari-position-fixed-child-bug
5aa56fe 
Add Wall of Browser Bugs entry for #16814
@mdo mdo mentioned this issue Jul 25, 2015
Closed
@cvrebert cvrebert mentioned this issue Jul 27, 2015
Merged
@openradar-mirror openradar-mirror mentioned this issue Aug 3, 2015
Open
@cvrebert
Copy link
Collaborator

There is now a test for this in the W3C CSS WG test suite: w3c/csswg-test#813

cvrebert added a commit that referenced this issue Jan 7, 2016
@cvrebert
https://webkit.org/b/147284 has been fixed
6ab9e10 
Refs #16814
[ci skip]
cvrebert added a commit that referenced this issue Jan 7, 2016
@cvrebert
Port 6ab9e10 to v3
9be8428 
https://webkit.org/b/147284 has been fixed
Refs #16814
[ci skip]
@openradar-mirror openradar-mirror mentioned this issue Apr 12, 2016
Open
@enbo
Copy link
Author

enbo commented Jun 4, 2016

Hm, I don't think it's actually been fixed yet. I looked at your test (https://bug-147284-attachments.webkit.org/attachment.cgi?id=268137) and it fails on Safari Version 9.1.1 (11601.6.17).

Thanks for passing this bug to the WebKit team!

@cvrebert
Copy link
Collaborator

cvrebert commented Jun 4, 2016

@enbo It's fixed in the current Safari Technology Preview. So the fix should be shipped in the next stable Safari release.
Protip: Test using the current WebKit Nightly in the future, rather than stable Safari.

@enbo
Copy link
Author

enbo commented Jun 4, 2016

Ah, I see.
Thanks for the tip! I'm still very new to bug reporting/testing.

@jonathanmelville
Copy link

Does anyone know if there is a known workaround to this problem?

I have tried all of the usual Safari hacks (transform: translateX(0) to no avail. Would love to know if anyone has been able to fine a reliable workaround to this problem.

Can confirm this has been fixed in the latest tech preview but that doesn't really help for now.

@cvrebert
Copy link
Collaborator

Set a non-auto value for the left or right property if possible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser-bug confirmed css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cvrebert @jonathanmelville @enbo