Solved
Responsive Previewer for media queries ignore css styles when calc() css3 syntax is used
There are certain styles on a page that don't get applied when viewing the page in Classic UI Responsive Previewer for iPad. However, they display as expected on the actual device AND on the browser window re-sized for the breakpoint.
We have media queries for screen size mentioned below. We're using the following 2 lines that cause the styles that follow these lines to be ignored:
width: -webkit-calc(100% - 30px);
width: calc(100% - 30px);
If above 2 lines are removed from our css, then the corresponding media query styles apply as expected when viewing in Responsive Previewer (RP).
Viewpoint / Breakpoints:
320px
480px
768px
960px
1164px
Media Queries:
@media screen and (min-width: 321px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1164px) {
}
Why would the styles work on the device with those breakpoints, but just not on the RP? Could it be a bug with RP not being able to handle calc() correctly? Anyone come across this before?
Thank you.