850827 - Google Maps mobile site uses -webkit-box-sizing (although it causes no real problems at the moment)

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P5)

Description

[Aaron Train [:aaronmt]]

Currently on Google Maps in landscape orientation when the page is done loading, the toolbar is hidden off screen and the Maps toolbar rests at the top of the window. Attempts at manipulating Google Maps reveals the toolbar but overlaps their toolbar making it impossible to interact with.

Can we be smarter here in the toolbar dismissal with this type of content?

See video: http://www.youtube.com/watch?v=c-b7dP4WvWg&list=UUFYtiiCq7UmewNy-pzQTZNg&index=1

--
Nightly (03/13)
Galaxy Note II (Android 4.2)

Comment 1

[Aaron Train [:aaronmt]]

Portrait too my mistake.

Comment 2

[Chris Lord [:cwiiis]]

Small note, this is a regression vs. an earlier version of my queue where this used to work perfectly... I suspect a rounding error or a bad rebase, looking at it now.

Comment 3

[Chris Lord [:cwiiis]]

Ok, so either their site has changed or something has changed in layout since I wrote these patches, as the page is just a few pixels over the viewport - you can actually scroll it if you initiate the scroll from near the search box...

I guess I need to look at the page source and see what it's doing, this could still be our error (but I kinda doubt it).

Comment 4

[Chris Lord [:cwiiis]]

Looking at the source, I think layout may be doing something wrong here... The map is the correct size, and all of its sibling divs have zero height, yet its parent accumulates 2 pixels from somewhere.

In short, the dynamic toolbar is doing the right thing... I'll drill further to see if this is a problem in layout. Given that this used to work, this may well be a regression.

Comment 5

[Chris Lord [:cwiiis]]

(In reply to Chris Lord [:cwiiis] from comment #4)
> Looking at the source, I think layout may be doing something wrong here...
> The map is the correct size, and all of its sibling divs have zero height,
> yet its parent accumulates 2 pixels from somewhere.
> 
> In short, the dynamic toolbar is doing the right thing... I'll drill further
> to see if this is a problem in layout. Given that this used to work, this
> may well be a regression.

Ignore this - I missed the border on the map element. So it seems that perhaps it's expecting box-sizing:border-box? I'll grep the source now.

Comment 6

[Chris Lord [:cwiiis]]

Yup, it has an unprefixed box-sizing on the map. This is blocked by bug 243412 - alternatively, maybe evangelism could get them to specify -moz-box-sizing too?

Comment 7

[Lawrence Mandel [:lmandel] (use needinfo)]

Joanne - This issue impacts mobile and tablet. However, at least on mobile, I can scroll up to cause the awesomebar to move off screen where I can interact with the Google maps toolbar. Can you speak with Google about the issue that Chris identified in comment 6?

Comment 8

[Chris Lord [:cwiiis]]

Just to add, I got this slightly wrong - they use -webkit-box-sizing only, not an unprefixed box-sizing - a line-break made me miss the prefix. So this is worse, assuming they deliver this page to other non-WebKit engines...

Comment 9

[Chris Lord [:cwiiis]]

As this is now an evangelism issue, unassigning.

Comment 10

[Aaron Train [:aaronmt]]

Wait a second here ...

I filed this as a functional regression blocking Bug 716403 as the issue here essentially regressed the ability to effectively use the Google Maps map-related toolbar *in-conjunction* with how our dynamic toolbar works (on this page in particular). If you disable (browser.chrome.dynamictoolbar; false), one can use the Google Maps toolbar as normal. That is what this bug is about is it not?

Comment 11

[Aaron Train [:aaronmt]]

Ok scratch that I misread, sorry for the noise

Comment 12

[Chris Lord [:cwiiis]]

So Brad suggested a nice solution for this issue that I'm going to code that means we won't have to rely on evangelism (but we still should, Google seem to be using -webkit-box-sizing quite a lot :/).

I'll open a new bug for said feature and block this with it.

Comment 13

[Chris Lord [:cwiiis]]

As the site is now restored to its prior behaviour with bug 852565, retitling to reflect the evangelism issue.

Comment 14

[Chris Lord [:cwiiis]]

Removing blocker on dynamic-toolbar since bug #852565 fixes the main issue we had with this.

Comment 15

[Lawrence Mandel [:lmandel] (use needinfo)]

I can no longer reproduce this issue in Firefox 22. I take it that this is a result of the fix in bug 852565 but as there is no issue there is nothing to evangelize in this case. I'm resolving as fixed.

Comment 16

[Chris Lord [:cwiiis]]

(In reply to Lawrence Mandel [:lmandel] from comment #15)
> I can no longer reproduce this issue in Firefox 22. I take it that this is a
> result of the fix in bug 852565 but as there is no issue there is nothing to
> evangelize in this case. I'm resolving as fixed.

I wouldn't say there's nothing left to evangelise - because of this, this site has an unnecessary 2 pixels that you can scroll the page by (which feels broken if you manage to do it).

It's not much, so at your discretion, but they really shouldn't be using -webkit-box-sizing and no other prefixed or unprefixed versions of this property...

Comment 17

[Brad Lassey [:blassey] (use needinfo?)]

reopening per comment 16

Comment 18

[Lawrence Mandel [:lmandel] (use needinfo)]

Thanks for the clarification Chris. We'll include this in our Google Maps request.

Comment 19

[Hallvord R. M. Steen [:hallvors]]

In all the code G Maps sends, I find this single instance of -webkit-box-sizing, in an inline style sheet:

gbsb{-webkit-box-sizing:border-box;display:block;position:relative;*zoom:1}

Comment 20

[Karl Dubost💡 :karlcow]

After checking the CSS, most of the -webkit- which matters seem to have their counterpart for other browsers. Closing as FIXED.

.gb_s{display:inline-block;
    outline:none;
    vertical-align:middle;
    -moz-border-radius:2px;
    border-radius:2px;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    height:30px;
    width:30px}