1007527 - When small images are not loaded, the alt text is overlapped.

Status: RESOLVED WORKSFORME

(Firefox :: General, defect)

Description

[孟宪茂]

Testing Steps:

a) go to browser > open www.gmail.com;
b) Login into gmail;

Testing Result:Two funtional opetion "Search" and " Refresh " got overlap.

also see sprd bug http://bugzilla.spreadtrum.com/bugzilla/show_bug.cgi?id=309149

Comment 1

[Tzu-Lin Huang [:dwi2][:tzhuang]]

I don't think we could do anything about it. Because browser tabs are OOP iframe and they are under different domains.
The two option menus are implemented and styled on the website, I think it is better to ask content author to fix it.

Comment 2

[Tzu-Lin Huang [:dwi2][:tzhuang]]

Attachment: screenshots

Also, I cannot reproduce it. The two option icons seems to be quite normal on my tarako.

Comment 3

[孟宪茂]

Attachment: screenshot

This may vary in different regions,the attachment is from our India test member.

It is the text that got overlap rather then the icons.

thanks!

Comment 4

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

That might be a TE?  Esp if it happens on a android...

Comment 5

[Jason Smith [:jsmith]]

(In reply to Naoki Hirata :nhirata (please use needinfo instead of cc) from comment #4)
> That might be a TE?  Esp if it happens on a android...

I think it is. We've had loads of problems with anything Google-related historically, as Google has had a bad habit of giving us webkit prefixes.

Comment 6

[Karl Dubost💡 :karlcow]

tested on Firefox OS 1.4 on ZTE Open and unable to reproduce. I get the two icons.
BUT what shows the attachment on
https://bug1007527.bugzilla.mozilla.org/attachment.cgi?id=8419238

is that No images at all have been loaded into the page (see the missing envelop on the left side), and what we see is the alt text of the images. Firefox is not very good at displaying alt for images which are tiny and very close from each other. I'm pretty sure there must be a bug about it somewhere. 

CLOSING as INVALID.

Comment 7

[孟宪茂]

(In reply to Karl Dubost :karlcow from comment #6)
> tested on Firefox OS 1.4 on ZTE Open and unable to reproduce. I get the two
> icons.
> BUT what shows the attachment on
> https://bug1007527.bugzilla.mozilla.org/attachment.cgi?id=8419238
> 
> is that No images at all have been loaded into the page (see the missing
> envelop on the left side), and what we see is the alt text of the images.
> Firefox is not very good at displaying alt for images which are tiny and
> very close from each other. I'm pretty sure there must be a bug about it
> somewhere. 
> 
> CLOSING as INVALID.

It is sure that it is a bug somewhere,why it is marked as INVALID?

Comment 8

[Karl Dubost💡 :karlcow]

It is explained above, in my previous comment.
This is not a Web Compatibility bug. And it's not related to Mobile either.
*IF* it's a bug it is then related to rendering alt text in Gecko when images are not loaded.

You might want to change to the relevant component 
and check if Bug 41924 has already something about it.

Comment 9

[Karl Dubost💡 :karlcow]

This could be related to Bug 11011 which is closed.

Comment 10

[Karl Dubost💡 :karlcow]

David,
do you know which component this bug should live in?

Summary: When images are not loaded, the alt text overlaps for icons. So it seems slightly related to browser built-in CSS and the Bug 11011.

Thanks.

Comment 11

[Boris Zbarsky [:bzbarsky]]

What are the styles on the relevant <img> elements?  Are these documents in standards mode?

In standards mode we aim to make sure the alt text is completely visible, in general, by treating images that have errors as non-replaced elements (as the HTML spec requires, btw).  How they look after that depends on the CSS the site used.

Comment 12

[Ross Kuhlman ([e-mail])]

Removing qawanted tag, as question appears to have been addressed.

Comment 13

[bhavana bajaj [:bajaj]]

(In reply to Karl Dubost :karlcow from comment #6)
> tested on Firefox OS 1.4 on ZTE Open and unable to reproduce. I get the two
> icons.
> BUT what shows the attachment on
> https://bug1007527.bugzilla.mozilla.org/attachment.cgi?id=8419238
> 
> is that No images at all have been loaded into the page (see the missing
> envelop on the left side), and what we see is the alt text of the images.
> Firefox is not very good at displaying alt for images which are tiny and
> very close from each other. I'm pretty sure there must be a bug about it
> somewhere. 
> 
> CLOSING as INVALID.

Karl, does gmail have a different experience per region and hence you may not be seeing it vs the reporter ? Just wanted to get that piece clarified.

Comment 14

[Karl Dubost💡 :karlcow]

bhavana,

:) I based my comment and rationale on his/her screenshot.
See the other following comment too. It's not a Web Compatibility issue. 

A way to reproduce it is by putting a proxy blocking all images and having the alt text displayed instead of the images.

The Comment #11 is what needs to be tested now and creates an interesting question for Accessibility and Usability.

Comment 15

[Karl Dubost💡 :karlcow]

If it's the responsibility of the site owner, it's happening across the board for all devices/browsers. So not really specific to Mozilla. Hmm interesting, maybe a good bug for http://webcompat.com/ more of the side of usability.

Comment 16

[Joe Cheng [:jcheng] (please needinfo)]

Hi Karl, any idea on how we move forward on this bug? thanks

Comment 17

[Karl Dubost💡 :karlcow]

Attachment: Reduced Test case to test the display of alt text under different circumstances.

Joe,

I eluded about that into #comment 14
We should test across browsers how this issue is handled. 

I created a reduced test case in attachment 
I put the test case online too.
http://la-grange.net/2014/05/20/moz/overlapping-alt-text

I will upload what it gives in different browsers.

Comment 18

[Karl Dubost💡 :karlcow]

Attachment: Test Case Rendering in Firefox 29.0.1

Comment 19

[Karl Dubost💡 :karlcow]

Attachment: Test Case Rendering in Opera 20.0 (blink)

Comment 20

[Karl Dubost💡 :karlcow]

Attachment: Test Case Rendering in Safari 7.0.3 (WebKit)

Comment 21

[Karl Dubost💡 :karlcow]

Joe,

Gecko shows the alt.
Opera (blink) and Safari (webkit) show a broken image.
If someone can test on IE. That would be interesting.

The reduced test case shows that when the image is constrained in a small table cell space, the text overlaps. Still not sure it is a Web Compatibility issue. 

Could someone test on Chrome Mobile Android?

Comment 22

[Boris Zbarsky [:bzbarsky]]

Attachment: Test case rendering in IE11

> If someone can test on IE. That would be interesting.

Here you go.

Comment 23

[Karl Dubost💡 :karlcow]

Excellent, Boris.
So IE and Firefox displays the text overlapping.
The others do not display the text at all.

The overlapping is occurring (if I understood) because the images are in constrained table cells with small width. My feeling is that they should "escape from their box" to not overlap in these circumstances. I have the feeling it could become pretty crowded with a lot of icons.

:/ difficult.

All of that said I don't think it is a Web Compatibility issue. :)

Comment 24

[Joe Cheng [:jcheng] (please needinfo)]

triage: since this isn't a tarako specific problem, let's not block tarako with this bug and put this to backlog

Comment 25

[Karl Dubost💡 :karlcow]

It seems to be something related to UX and Rendering engine of Gecko. :)

Comment 26

[Boris Zbarsky [:bzbarsky]]

In what sense?  This sounds like poor web site design interacting badly with rendering as specified in the HTML5 spec...

Comment 27

[Karl Dubost💡 :karlcow]

Boris,

In the sense that either current browsers render either no text at all, or overlapping images for ie and firefox. So there's no really a Web Compatibility issue, more a UX issue.

Using table for layouts, even if it's not a very wise choice, but it is a common pattern. Note that the alt text overlapping in case of missing images for voice browsers and other accessibility tools are unlikely to create an issue. It's an issue for people who needs to have access to the text and read it through the visual layout. But in this case, I have a feeling that we should have a way for the browser to identify that the text is too long for the size of the box and rearrange the layout so we can show the text (if we think it's worth fixing). Choices choices. :)

With regards to Google issues in general, there are others with higher priorities, which have big impacts on the general usuability :)

Comment 28

[BMO Automation]

Per policy at https://wiki.mozilla.org/Bug_Triage/Projects/Bug_Handling/Bug_Husbandry#Inactive_Bugs. If this bug is not an enhancement request or a bug not present in a supported release of Firefox, then it may be reopened.

Comment 29

[Peter Magyari (Desktop QA)]

Since this is a very old issue and I'm unable to reproduce it on my end I'm going to close it for now.

Feel free to re-open if it still occurs for you while using the latest Firefox version(s).