995140 - Google Calendar sends a lowfi version to Firefox OS

Status: RESOLVED WONTFIX

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

Description

[Chris Lord [:cwiiis]]

Google delivers the low-fi version of Google Calendar to FirefoxOS. I get the nicer touch interface on Firefox for Android, which has some rendering issues (likely missing unprefixed/moz-prefixed bits), but works fine and is a massive step up from their basic interface.

I'd screenshot, but Google Calendar has chosen this moment to be unavailable :p

Comment 1

[Karl Dubost💡 :karlcow]

@Chris, 

if you could test all corner cases, adding events, removing events, etc. in the calendar for Firefox Android and give a list of the glitches, that would be very useful! :)

And if the calendar is really working minor a few glitches, we could ask Google to send us this version.

Comment 2

[Chris Lord [:cwiiis]]

n?me, comment #1.

Comment 3

[Karl Dubost💡 :karlcow]

Hmm ok. That doesn't really help.

Let me try…
On entering http://calendar.google.com/ 

on Firefox OS 1.4, I get redirected to http://www.google.com/calendar/m which is basically a very simple version of google calendar.
See Screenshot firefox-os-1.4.png

on Firefox Android (30), I get redirected to the same version than Firefox OS. http://www.google.com/calendar/m


On Android Stock browser, I get a touch version at http://www.google.com/calendar/gpcal
See screenshot android-stock.png

If I copy/paste this http://www.google.com/calendar/gpcal into Firefox for Android, I get a version similar to the one on Android Browser.
See screenshot android-firefox-30-touch.png

Comment 4

[Karl Dubost💡 :karlcow]

Attachment: firefox-os-1.4.png

Firefox OS 1.4 Google Calendar Screenshot

Comment 5

[Karl Dubost💡 :karlcow]

Attachment: android-stock.png

Android Stock Browser Google Calendar Screenshot

Comment 6

[Karl Dubost💡 :karlcow]

Attachment: android-firefox-30-touch.png

Android Firefox Android Google Calendar Screenshot

Comment 7

[Karl Dubost💡 :karlcow]

In the Firefox Android version when manually requesting the enhanced version, we can notice the few common issues such as

* Missing Gradients
* Flexbox using the old WebKit Syntax instead of the new one.

Comment 8

[Karl Dubost💡 :karlcow]

I will contact Google about it but do not have your hopes too high. The official message is that anything which requires changes on the CSS is unlikely to be done.

Comment 9

[Chris Lord [:cwiiis]]

Removing my needinfo, sounds like comment #7 provided the information necessary.

Comment 10

[Karl Dubost💡 :karlcow]

Details for Google team. 
Testing So https://www.google.com/calendar/gpcal?hl=en-GB
When going through the CSS sent to Chrome Mobile, we can see things (more issues in the inline CSS. This is just an example) like:

#og_user_warning{
	top:74px;
	left:0;
	opacity:0;
	pointer-events:none;
	position:absolute;
	width:100%;
	z-index:1000;
	-webkit-transition:opacity 1000ms ease-out
}

#og_user_warning_inner{
	background:#fffcb3;
	border:2px solid #fff;
	font:13px/17px sans-serif;
	margin:0 auto;
	padding:5px 3px;
	pointer-events:none;
	text-align:center;
	width:210px;
	-webkit-border-radius:10px;
	-webkit-box-shadow:0 0 8px rgba(0,0,0,0.7)
}

#og_head{
	background-color:#fff;
	color:#000;
	font-family:helvetica,arial,sans-serif;
	font-size:11px;
	overflow:hidden;
	position:relative;
	-webkit-text-size-adjust:none
}

#og_head .og_a{
	display:-webkit-box;
	-webkit-box-orient:horizontal
}


Most of these have their equivalents without -webkit- prefixes. For the flexbox properties, switching to the modern syntax would both ensure that the Web site is working on current and future versions of Chrome AND would make it compatible with more mobile devices.

Comment 11

[Karl Dubost💡 :karlcow]

Contacted Google.

Comment 12

[Karl Dubost💡 :karlcow]

News from Google.

> Thanks for the report. I've forwarded this along to the Calendar team and they're looking into it (internal issue # 15803694). I'll update you as I hear anything else.

Comment 13

[Karl Dubost💡 :karlcow]

Attachment: google-calendar.jpg

This has not changed. We still receive a very lowfi version.
https://www.google.com/calendar/m?pli=1

I wonder if we should put all the UA sniffing Google bugs on http://webcompat.com/ because usually the tier1 vs tier2/3 versions is shared by other browser vendors.

Comment 14

[Karl Dubost💡 :karlcow]

Attachment: gecko-ChrUA-unprefixed.png

Hallvord, Daniel, 

This is the rendering of Google Calendar once unprefixed is activated globally. 
(It doesn't work yet completely with webkit pref, but that's normal, not everything has landed there).

As you may notice there is still a glitch with the day button. Looking at the code it is related to border-image.

``` css
.ci-btn-left.ci-btn-on {
	-webkit-border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAhCAYAAADkrOp1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYFJREFUeNqEU7FOwzAQvXMuJSC1oqlKuoaZkakrGyti5i+Q+AZ+goERiR9hYEJiZKVIFaqgtJV9nO04SdO0TfQk5+75vedLgswM45vnDADuBOcCuy4vkmaOCE/ZqJ+nabcbxzFh0Zx8fQPFpG6z0eD0JEuPVUSglAJATyGaAxnm8WDY70WdBKIawd4RxUBa81EnSRTFHUdAu7tQQBUB+QW5B7BwvSKFEB2BpSCHAXsiZnQVV5dnKlauxAxlsyh7ggQFNKaSLgmmRvAeDUJQMAxKBAw0CRwIxmHdwCv7U4iCVUHYamFcyKZCGVLLbmhRMEHBD2jzFFCGlDruzYBtGbiaA2JbhkDQvonNSZraoGCnhbYpNxXsvkrBBd2mwMWgkHdYQAshhNQiz7hpYfYrQO1145YM8mf9afGIkBVg82XJnzDsH76vFr+z8FWtQTzU1UX+yKufj+V8NtVGh0/Dgd38mLsvb5PL+4fX68/pPF8sda/uguzHmwjOBKngoE74F2AAuSgRtQsg/JsAAAAASUVORK5CYII=') 4 2 5 4;
	border-width: 4px 2px 5px 4px;
}
```

and 

``` css
.ci-btn-left {
	margin-right: -1px;
	padding-right: 7px;
	position: relative;
	-webkit-border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAhCAYAAADkrOp1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPNJREFUeNpi/P//P0PDvOdCDAwM0UCsDsQgNhywACUlGRkZmvxtBCzV5NiVuNiZOGGSd5/+ZGBhZWaMCrATsFWTYVP/BzTtx8+/cN2/f/9jYAEK6kiLMin9/P2XAR38/fefgeXvPwZ2hv+MrH8w5YEKGBiYGAgAFhABtBorAInjVwA3gXZWEK+AbDcQ7ch/tPMFoZAk6EiG/6OxCdPIxMLM+PvP3/+//0MF0DGTEB/z82dvft8HmYINM1nqcO8/ee3zsfvPf1z99ef/D3RrGIHZn/fJq9+uW459NHv36Y8oUBEnugIQzQHEOtCygR1ZAUCAAQDx3KURavzvFAAAAABJRU5ErkJggg==') 4 2 5 4;
	border-width: 4px 2px 5px 4px;
}
```

Though when I replace with the right border-image, I still don't get something working. There is another issue here.

Comment 15

[Karl Dubost💡 :karlcow]

And previous comment, I have forgotten to mention Chrome User Agent.

Comment 16

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

Karl: I think this is caused by stuff explained in http://dbaron.org/log/20120612-border-image - search for "the fill keyword must be used". There is a similar bug for GMail somewhere.

Comment 17

[Daniel Holbert [:dholbert]]

I'm not familiar with the evolution of border-image, but it looks like hallvors is right. Per dbaron's post that hallvors linked to:

  We're planning to continue to support -moz-border-image for now
  (but with the updated behavior [...]). [...] Opera & WebKit's
  prefixed implementation still follow the old rules.
http://dbaron.org/log/20120612-border-image

So, our handling of -webkit-border-image as a pure alias may be slightly invalid, since it has some outdated bonus behavior in true WebKit browsers. Not sure at this point how problematic that will be for us, on sites that depend on -webkit-border-image.

For now, can we try to address this on Google Calendar with tech evang (come up with a working unprefixed expression & suggest that they add that after their prefixed version)?

Comment 18

[Daniel Holbert [:dholbert]]

(Actually, even adding the "fill" keyword that hallvors alluded to isn't quite sufficient -- we also need "border-style: solid" to be specified, or we else we don't render any border. This is correct, per spec, as noted in bug 1120072 comment 3. [and Chrome is nonconforming -- https://code.google.com/p/chromium/issues/detail?id=356802 ].

With those two changes -- adding 'fill' after the url() expression and adding 'border-style: none' -- the styles in comment 14 look nice to me, when applied to an element locally.)

Comment 19

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #18)
> With those two changes -- adding 'fill' after the url() expression and
> adding 'border-style: none' -- the styles in comment 14 look nice to me,
> when applied to an element locally.)

er, meant to say:  "adding 'border-style: solid'" (not 'none')

Comment 20

[Karl Dubost💡 :karlcow]

Attachment: Capture d’écran 2015-11-18 à 07.11.12.png

I removed the -webkit- in Blink and replaced it by 

.ci-btn-left.ci-btn-on {
    border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAhCAYAAADkrOp1AAAAGXRF…8mLsvb5PL+4fX68/pPF8sda/uguzHmwjOBKngoE74F2AAuSgRtQsg/JsAAAAASUVORK5CYII=') fill 4 2 5 4;
    border-width: 4px 2px 5px 4px;
    border-style: solid;
}

And it fixed the button as you can see in the screenshot (left Firefox/Gecko, right Opera/Blink). The rest is not fixed on purpose but the issues are very similar. 


I wonder if we should add a new conversion in the unprefixing service adding the right keywords.

.foo {
	-webkit-border-image: url() 4 2 5 4;
}

convert to 

.foo {
	-webkit-border-image: url() 4 2 5 4;
        border-image: url() fill 4 2 5 4;
        border-style: solid;
}

I opened 
https://github.com/hallvors/css-fixme/issues/13

Comment 21

[Mike Taylor [:miketaylr]]

I agree we (In reply to Daniel Holbert [:dholbert] from comment #17)
> For now, can we try to address this on Google Calendar with tech evang (come
> up with a working unprefixed expression & suggest that they add that after
> their prefixed version)?

That would be ideal.

I've filed https://github.com/whatwg/compat/issues/17 for -webkit-border-image and pinged Jacob Rossi to see if someone from the Edge team can help out with some notes on how they implemented it -- you can see from the test page linked there that they're not doing a simple alias.

Comment 22

[Karl Dubost💡 :karlcow]

I think I will try to do the same exercise I have done for Gmail, but I should be careful to test every parts of it.

Comment 23

[alancutter]

Google Calendar's mobile site has dropped usage of -webkit-border-image: https://code.google.com/p/chromium/issues/detail?id=559258#c37

Comment 24

[Karl Dubost💡 :karlcow]

Thanks Alan!
I will need to test again everything.

Comment 25

[Karl Dubost💡 :karlcow]

Closing as we are not working on Firefox OS anymore.