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

CSS @media (width: *px) may not work if devicePixelRatio is greater than 1. #17759

Merged
merged 1 commit into from Jul 23, 2019

Conversation

chromium-wpt-export-bot
Copy link
Collaborator

@chromium-wpt-export-bot chromium-wpt-export-bot commented Jul 10, 2019

When devicePixelRatio is greater than 1, the viewport size of the CSS media
query may appear as non-integers. This can happen in Chrome for Android if
the UseZoomForDSF flag is enabled.

For example:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media (width: 393px) {
p {
color: red;
}
}
</style>
<p>text</p>

If the device width is 1081 physical pixels and devicePixelRatio is 2.75. The
viewport width of the CSS media query will be 393.091px.

Change-Id: I25ee4da1ebdbd57202fa8c5e360138a8058f578f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1695522
Commit-Queue: David Bokan <bokan@chromium.org>
Reviewed-by: David Bokan <bokan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#680047}

Copy link
Collaborator

@wpt-pr-bot wpt-pr-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already reviewed downstream.

@chromium-wpt-export-bot chromium-wpt-export-bot force-pushed the chromium-export-cl-1695522 branch 4 times, most recently from b1795e4 to 9a44157 Compare July 16, 2019 11:00
@chromium-wpt-export-bot chromium-wpt-export-bot force-pushed the chromium-export-cl-1695522 branch 2 times, most recently from cb5e963 to 8a362a4 Compare July 23, 2019 08:20
…han 1.

When devicePixelRatio is greater than 1, the viewport size of the CSS media
query may appear as non-integers. This can happen in Chrome for Android if
the UseZoomForDSF flag is enabled.

For example:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    @media (width: 393px) {
        p {
            color: red;
        }
    }
</style>
<p>text</p>

If the device width is 1081 physical pixels and devicePixelRatio is 2.75. The
viewport width of the CSS media query will be 393.091px.

Change-Id: I25ee4da1ebdbd57202fa8c5e360138a8058f578f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1695522
Commit-Queue: David Bokan <bokan@chromium.org>
Reviewed-by: David Bokan <bokan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#680047}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants