Black arrow on google images is rendered as black rectangle

RESOLVED FIXED

Status

Tech Evangelism
Desktop
RESOLVED FIXED
a year ago
6 months ago

People

(Reporter: arni2033, Assigned: karlcow)

Tracking

({regression})

Firefox 50
regression

Firefox Tracking Flags

(platform-rel +, firefox49 unaffected)

Details

(Whiteboard: [google] [css] [sitewait][platform-rel-Google], URL)

Attachments

(4 attachments)

(Reporter)

Description

a year ago
>>>   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
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.
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.
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)
Flags: needinfo?(jmuizelaar)

Comment 4

a year ago
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.
(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 ?
Created attachment 8771631 [details]
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?
Attachment #8771631 - Attachment mime type: text/plain → text/html

Comment 7

a year ago
Created attachment 8771643 [details]
comparison screenshot.png

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

A: Nightly50.0a1 and Edge.
B: Chrome and Firefox48.0b7.
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?
Flags: needinfo?(kdubost)
(Assignee)

Comment 9

a year ago
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
Component: Layout → Desktop
Flags: needinfo?(kdubost)
Product: Core → Tech Evangelism
Version: 50 Branch → Firefox 50
(Assignee)

Comment 10

a year ago
Created attachment 8772323 [details]
Google-square-arrow.png

Contacted Google about the issue.
(Assignee)

Updated

a year ago
Assignee: nobody → kdubost
Whiteboard: [google] [css] [sitewait]
status-firefox49: --- → unaffected
platform-rel: --- → ?
Whiteboard: [google] [css] [sitewait] → [google] [css] [sitewait][platform-rel-Google]
Flags: needinfo?(jmuizelaar)
Duplicate of this bug: 1290648
platform-rel: ? → +
Given bug 382721 caused this "regression" but it's something that can be fixed by Google, do we need to track this for 50?
Flags: needinfo?(rkothari)
(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.
Flags: needinfo?(rkothari)
OK I'm goign to clear the firefox50:affected to get it out of our queries since Google has been alerted.
status-firefox50: affected → ---

Updated

10 months ago
Rank: 75
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;
}
(Assignee)

Comment 16

6 months ago
Created attachment 8841401 [details]
google-arrow-fx54

Thanks for checking. 
Indeed this has been fixed.
(Assignee)

Updated

6 months ago
Status: NEW → RESOLVED
Last Resolved: 6 months ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.