1287076 - Black arrow on google images is rendered as black rectangle

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[arni2033]

>>>   My Info:   Win7_64, Nightly 50, 32bit, ID 20160714030208 (2016-07-14)
STR:
1. Open url [1]
2. Look at the black arrow pointing up (that appears right below the first image)

AR:  The arrow is rendered as black rectangle
ER:  The arrow should be rendered as an arrow

> [1] https://www.google.ru/search?q=image&newwindow=1&tbm=isch&imgil=LenqKq6XztGmhM%253A%253BL3o0m7uDkFwxPM%253Bhttp%25253A%25252F%25252Fwww.telegraph.co.uk%25252Fnews%25252Fscience%25252Fpicture-galleries%25252F12185117%25252FWellcome-Image-Awards-2016-Winning-images-in-science-photo-competition.html&source=iu&pf=m&fir=LenqKq6XztGmhM%253A%252CL3o0m7uDkFwxPM%252C_&usg=__gMG_knTGbQmo5rv6bCjjEvkHqNg%3D&biw=346&bih=675#imgrc=LenqKq6XztGmhM%3A

This is regression from bug 382721. Regression range:
> https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=0ff8e745ca488ca1bd68346a09ea50baf1b26f1b&tochange=0ac2613adaeefd45f9cde2d4d16746484a1be5e5

Comment 1

[Tooru Fujisawa [:arai]]

This is because of the following style:

  border-bottom: 10px solid #222;
  border-left: 10px dotted transparent;
  border-right: 10px dotted transparent;
  height: 0px;
  width: 0px;

previously, the corner between dotted and non-dotted side are rendered like solid, and it results in triangle.

In bug 382721, the corner interaction between dotted and non-dotted side are changed,
and now non-dotted side draws entire corner, so it results in rectangle.

it's described in https://bug382721.bmoattachments.org/attachment.cgi?id=8647739 (`dotted + other` case)

I'm not sure why they use dotted there.  Switching it to solid should solve the rendering.

Comment 2

[Tooru Fujisawa [:arai]]

https://drafts.csswg.org/css-backgrounds-3/#the-border-style
https://www.w3.org/TR/css3-background/#the-border-style

> Note: This specification does not define how borders of different styles
> should be joined in the corner.

At least the spec doesn't define the detail of the interaction between dotted and non-dotted style.

Comment 3

[Tooru Fujisawa [:arai]]

https://www.w3.org/TR/css3-background/#corner-transitions  (linking only to w3.org because csswg.org doesn't show image...)

> 5. Rounded Corners
> ...
> 5.4. Color and Style Transitions
> Color and style transitions must be contained within the segment of the
> border that intersects the smallest rectangle that contains both border radii
> as well as the center of the inner curve (which may be a point representing
> the corner of the padding edge, if the border radii are smaller than the
> border-width).

There are restriction about where the color transition should happen for "Rounded Corners", but it's not about non-rounded corners.  So I think it doesn't apply for this case.


:jrmuizel, can I have your opinion?
do you think we should do something here, or is this tech evangelism issue?  (I think latter)

Comment 4

[Alice0775 White]

FYI, When UA spoofed like[1]or[2], they use the "solid" style instead of "dotted".
And it works as expected.

[1]
user_pref("general.useragent.override", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586");

[2]
user_pref("Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2783.2 Safari/537.36");


So this is the TE bug.

Comment 5

[Astley Chen (inactive)]

(In reply to Alice0775 White from comment #4)
> So this is the TE bug.

What's TE stand for ? How do we usually tackle this kind of issue ?

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: one test for comparing browser behavior

Does our behavior (especially for colors) on this test match any other browsers?

If not, do we think that's likely to be ok in general?

Comment 7

[Alice0775 White]

Attachment: comparison screenshot.png

Tested on Windows10, The comparison results indicates there are two groups:

A: Nightly50.0a1 and Edge.
B: Chrome and Firefox48.0b7.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

OK, given that it's visually better, and that it does match Edge, it seems reasonable to me try to stick with that behavior for now.

We should try to get in touch with somebody at Google to ask them about giving us the CSS that they already give to some other browsers (comment 4).  Maybe Karl can help with that?

Comment 9

[Karl Dubost💡 :karlcow]

The markup for the arrow is:

```html
<div id="irc_pc" style="top: -10px; bottom: auto; left: 113px;"></div>
```

What Chrome Desktop receives:

```css
#irc_pc {
	border-bottom: 10px solid #222;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	position: absolute;
	top: -10px;
	width: 0;
}
```


What Firefox receives:

```css
#irc_pc {
	border-bottom: 10px solid #222;
	border-left: 10px dotted transparent;
	border-right: 10px dotted transparent;
	height: 0;
	position: absolute;
	top: -10px;
	width: 0;
}
```

Moving to Tech Evangelism

Comment 10

[Karl Dubost💡 :karlcow]

Attachment: Google-square-arrow.png

Contacted Google about the issue.

Comment 12

[Andrew Overholt [:overholt]]

Given bug 382721 caused this "regression" but it's something that can be fixed by Google, do we need to track this for 50?

Comment 13

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

(In reply to Andrew Overholt [:overholt] from comment #12)
> Given bug 382721 caused this "regression" but it's something that can be
> fixed by Google, do we need to track this for 50?

Hi Andrew, yes we normally do not track tech evangelism kind of bugs such as this one. I think the status for fx50 will stay 'affected' until we have a resolution (even if it is from an external source) on this one. But from a tracking point of view, relman is not tracking this for fx50.

Comment 14

[Andrew Overholt [:overholt]]

OK I'm goign to clear the firefox50:affected to get it out of our queries since Google has been alerted.

Comment 15

[Tooru Fujisawa [:arai]]

it shows triangle now.
confirmed on Nightly 54.0a1 (2017-02-21) (64-bit), and Google Image on www.google.co.jp

here's style for the box:

#irc_pc {
    border-bottom: 10px solid #222;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 0;
    position: absolute;
    top: -10px;
    width: 0;
}

Comment 16

[Karl Dubost💡 :karlcow]

Attachment: google-arrow-fx54

Thanks for checking. 
Indeed this has been fixed.