Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

www.pcdiga.com - Product title is not visible #45375

Open
webcompat-bot opened this issue Nov 25, 2019 · 4 comments
Open

www.pcdiga.com - Product title is not visible #45375

webcompat-bot opened this issue Nov 25, 2019 · 4 comments

Comments

@webcompat-bot
Copy link

@webcompat-bot webcompat-bot commented Nov 25, 2019

URL: https://www.pcdiga.com/catalogo-pcdiga/componentes/placas-graficas

Browser / Version: Firefox 72.0
Operating System: Windows 10
Tested Another Browser: Yes

Problem type: Design is broken
Description: Product name does not appear. In actuality it is getting hidden behind the product picture. Works as expected in Edge.
Steps to Reproduce:
Just visited the URL.
Screenshot Description

Browser Configuration
  • gfx.webrender.all: false
  • gfx.webrender.blob-images: true
  • gfx.webrender.enabled: false
  • image.mem.shared: true
  • buildID: 20191124230652
  • channel: nightly
  • hasTouchScreen: false
  • mixed active content blocked: false
  • mixed passive content blocked: false
  • tracking content blocked: false

Console Messages:

[{'level': 'warn', 'log': ['This page uses the non standard property zoom. Consider using calc() in the relevant property values, or using transform along with transform-origin: 0 0.'], 'uri': 'https://www.pcdiga.com/catalogo-pcdiga/componentes/placas-graficas', 'pos': '0:0'}, {'level': 'warn', 'log': ['Loading failed for the <script> with source https://static.hotjar.com/c/hotjar-1379227.js?sv=6.'], 'uri': 'https://www.pcdiga.com/catalogo-pcdiga/componentes/placas-graficas', 'pos': '1:1'}, {'level': 'warn', 'log': ['Loading failed for the <script> with source https://cdn.onesignal.com/sdks/OneSignalSDK.js.'], 'uri': 'https://www.pcdiga.com/catalogo-pcdiga/componentes/placas-graficas', 'pos': '107:1'}, {'level': 'warn', 'log': ['Loading failed for the <script> with source https://d3ift91kaax4b9.cloudfront.net/static/version1574074015/frontend/bi/pcdiga/pt_PT/Magento_Theme/js/google-analytics.js.'], 'uri': 'https://www.pcdiga.com/catalogo-pcdiga/componentes/placas-graficas', 'pos': '1:1'}, {'level': 'error', 'log': ['Error: Script error for: Magento_Theme/js/google-analytics\nhttp://requirejs.org/docs/errors.html#scripterror'], 'uri': 'https://d3ift91kaax4b9.cloudfront.net/static/version1574074015/frontend/bi/pcdiga/pt_PT/requirejs/require.js', 'pos': '166:17'}, {'level': 'log', 'log': ['JQMIGRATE: Migrate is installed with logging active, version 1.4.1'], 'uri': 'https://d3ift91kaax4b9.cloudfront.net/static/version1574074015/frontend/bi/pcdiga/pt_PT/jquery/jquery-migrate.js', 'pos': '23:17'}, {'level': 'warn', 'log': ['Loading failed for the <script> with source https://connect.facebook.net/en_US/fbevents.js.'], 'uri': 'https://www.pcdiga.com/catalogo-pcdiga/componentes/placas-graficas', 'pos': '1:1'}, {'level': 'warn', 'log': ['Request to access cookie or storage on https://www.gstatic.com/recaptcha/releases/75nbHAdFrusJCwoMVGTXoHoM/recaptcha__pt.js was blocked because it came from a tracker and content blocking is enabled.'], 'uri': 'https://www.pcdiga.com/catalogo-pcdiga/componentes/placas-graficas', 'pos': '0:0'}, {'level': 'warn', 'log': ['Request to access cookie or storage on https://www.gstatic.com/recaptcha/releases/75nbHAdFrusJCwoMVGTXoHoM/recaptcha__pt.js was blocked because it came from a tracker and content blocking is enabled.'], 'uri': 'https://www.pcdiga.com/catalogo-pcdiga/componentes/placas-graficas', 'pos': '0:0'}]

From webcompat.com with ❤️

@webcompat-bot webcompat-bot added this to the needstriage milestone Nov 25, 2019
@softvision-oana-arbuzov softvision-oana-arbuzov changed the title www.pcdiga.com - design is broken www.pcdiga.com - Product title is not visible Nov 26, 2019
@softvision-oana-arbuzov

This comment has been minimized.

Copy link

@softvision-oana-arbuzov softvision-oana-arbuzov commented Nov 26, 2019

Thanks for the report, I was able to reproduce the issue.
image

Missing title:

<span>Kit XFX Low Profile Bracket</span>

Tested with:
Browser / Version: Firefox Nightly 72.0a1 (2019-11-25)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

@karlcow

This comment has been minimized.

Copy link
Contributor

@karlcow karlcow commented Nov 26, 2019

The title is here.

<div class="product-card--title" title="Kit XFX Low Profile Bracket">
	<a href="https://www.pcdiga.com/kit-xfx-low-profile-bracket">
		<span>Kit XFX Low Profile Bracket</span>
	</a>
</div>

just not visible. Probably a CSS issue. ok there is a lot to unpack here. It's full webkit CSS, with Firefox implementing some of these.

.page-products .product-card--title span {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.4rem;
	height: 2.8rem;
	overflow: hidden;
}

.product-card .product-card--title span {
	font-size: 15px !important;
	line-height: 17px;
	height: 34px;
	font-weight: 700;
	font-weight: 600;
	overflow: hidden;
	color: #000;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.product-card .product-card--title span {
	font-size: 15px;
	line-height: 21px;
	height: 42px;
	overflow: hidden;
	-webkit-line-clamp: 2;
	display: contents;
}

the a has a 0 height.
The span is declare as display: contents and this is bad for accessibility.

See https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents

Effectively, for our purposes here, using display: contents on an element does this: the element stops participating in the grid, and its contents start participating in it. It lets us specify our sponsors onto the grid, instead of the list they are contained in.

And I suspect that the display: contents is the issue here.
It is implemented in Firefox. if I deactivate it, the display:-webkit-box takes over.
I'm not sure why they chose. Removing display: contents doesn't break Chrome too.

So they could safely remove it.

@dholbert would probably add something.

Probably I should try to create a reduced test case.
but right now… the server is just down?

Service Temporarily Unavailable
The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

@karlcow karlcow modified the milestones: needsdiagnosis, needscontact Nov 26, 2019
@dholbert

This comment has been minimized.

Copy link

@dholbert dholbert commented Nov 29, 2019

I've got a reduced testcase. I think it's a Firefox bug, and it has to do with the fact that they set font-size:0px on an ancestor and then set it back to a reasonable value (15px) on the display:contents element. That, combined with a non-default line-height (set on the body element in this case), seems to cause the issue here.

@dholbert

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.