pr.viadeo.com shows whitespace on the right for small viewports (css issue)

RESOLVED WORKSFORME

Status

Tech Evangelism
Mobile
P5
normal
RESOLVED WORKSFORME
3 years ago
2 years ago

People

(Reporter: oliverthor, Unassigned)

Tracking

unspecified
ARM
Gonk (Firefox OS)

Firefox Tracking Flags

(b2g-master affected)

Details

(Whiteboard: [3.0-Daily-Testing] [country-us] [css] [contactready], URL)

Attachments

(1 attachment)

(Reporter)

Description

3 years ago
Description:
When the user navigates to the webpage 'http://pr.viadeo.com/es/', they will be located to a mobile-oriented site which contains a whitespace off the width of the page, where the user would be unexpected to pan.

Repro Steps:
1) Update a Flame to 20150325010206
2) Tap the 'Search' bar
3) Navigate to 'http://pr.viadeo.com/es/'
4) After loading, observe screen.
5) Attempt to pan right.

Actual:
User may pan right to reveal whitespace with no content.

Expected:
User may pan to reveal only content.


Environmental Variables:
--------------------------
Device: Flame 3.0
Build ID: 20150325010206
Gaia: aebfbd998041e960cea0468533c0b5041b504850
Gecko: cc0950b7a369
Gonk: b83fc73de7b64594cd74b33e498bf08332b5d87b
Version: 39.0a1 (3.0)
Firmware Version: v18D
User Agent: Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0
--------------------------


Repro frequency: 5/5
See attached: 
video- https://youtu.be/1-h0hv1K0QI
(Reporter)

Updated

3 years ago
QA Whiteboard: [QAnalyst-Triage?]
Flags: needinfo?(pbylenga)
Whiteboard: [3.0-Daily-Testing]
QA Whiteboard: [QAnalyst-Triage?] → [QAnalyst-Triage+]
Flags: needinfo?(pbylenga)

Comment 1

3 years ago
Created attachment 8583499 [details]
Capture d’écran 2015-03-26 à 09.52.23.png

So indeed there are things in the bottom of the viewport around the footer which seems wider. You can show them by doing 

``` css
html * {outline: 1px solid red;}
```

The issue is that I haven't figured out which element create that. Ah wait. Digging a bit more. I think I found.

```css
/* select the windows icon in the footer. Has the out of viewport issue */
ul.tac:nth-child(2) > li:nth-child(3) * {outline: 1px solid red;}
/* select the blackberry icon in the footer. This is wrapped underneath */
ul.tac:nth-child(2) > li:nth-child(4) * {outline: 1px solid red;}

```

So basically this one
``` css
ul.tac:nth-child(2) > li:nth-child(3) > a:nth-child(1) > span:nth-child(2)
```

The  content is: 
``` html
<span class="tooltip-content">Windows Phone</span>
```

The tooltip is defined in HTML and displayed on hover with CSS. Quite complicated for just a tooltip.
The content of :after is empty. See the screenshot.

``` css
.tooltip{
	position:relative
}

.tooltip:hover .tooltip-content,.tooltip:focus .tooltip-content{
	margin-bottom:7px;
	*margin-bottom:2px;
	opacity:1;
	visibility:visible
}

.tooltip-content{
	position:absolute;
	bottom:100%;
	left:0;
	z-index:998;
	min-width:44px;
	padding:4px 10px;
	margin:0 0 -7px 0;
	font-family:"Open Sans","Arial",sans-serif;
	font-size:11px;
	line-height:1.6em;
	color:#fff!important;
	text-align:center;
	text-decoration:none;
	text-shadow:none;
	white-space:nowrap;
	pointer-events:none;
	background:#4a494d;
	border-radius:3px;
	opacity:0;
	visibility:hidden;
	box-shadow:1px 1px 2px rgba(0,0,0,0.5);
	-webkit-transition:opacity .3s,margin .3s;
	-moz-transition:opacity .3s,margin .3s;
	transition:opacity .3s,margin .3s
}

.tooltip-content:after{
	position:absolute;
	bottom:-6px;
	left:10px;
	width:0;
	height:0;
	border-color:#4a494d transparent transparent;
	border-style:solid;
	border-width:7px 7px 0;
	content:''
}

.tooltip.tooltip-top-right:hover .tooltip-content,.tooltip.tooltip-top-right:focus .tooltip-content{
	margin-left:7px;
	*margin-left:5px
}

.tooltip-top-right .tooltip-content{
	right:0;
	left:auto
}

.tooltip-top-right .tooltip-content:after{
	right:5px;
	left:auto
}

.tooltip.tooltip-right:hover .tooltip-content,.tooltip.tooltip-right:focus .tooltip-content{
	margin-left:7px;
	*margin-left:5px
}

.tooltip-right .tooltip-content{
	top:3px;
	bottom:auto;
	left:100%;
	margin:-7px 0 0 0;
	margin-left:-7px
}

.tooltip-right .tooltip-content:after{
	top:6px;
	bottom:auto;
	left:-5px;
	border-color:transparent #4a494d transparent transparent;
	border-width:5px 5px 5px 0
}

.tooltip.tooltip-left:hover .tooltip-content,.tooltip.tooltip-left:focus .tooltip-content{
	margin-right:7px;
	*margin-right:5px
}

.tooltip-left .tooltip-content{
	top:3px;
	right:100%;
	bottom:auto;
	left:auto;
	margin:-7px 0 0 0;
	margin-right:-7px
}

.tooltip-left .tooltip-content:after{
	top:6px;
	right:-5px;
	bottom:auto;
	left:auto;
	border-color:transparent transparent transparent #4a494d;
	border-width:5px 0 5px 5px
}

.tooltip.tooltip-bottom:hover .tooltip-content,.tooltip.tooltip-bottom:focus .tooltip-content{
	margin-top:7px;
	*margin-top:2px
}

.tooltip-bottom .tooltip-content{
	top:100%;
	bottom:auto;
	margin:-7px 0 0 0
}

.tooltip-bottom .tooltip-content:after{
	top:-7px;
	bottom:auto;
	border-color:transparent transparent #4a494d;
	border-width:0 7px 7px
}
```





The content also has two `div id="footer"`. Not good, but unrelated.

Comment 2

3 years ago
A possible way to solve this issue for small viewport is to create a matrix of 2 x 2 icons.
So to slide the windows and blackberry icons for small viewport and to make sure the tooltip is aligned with the right side at maximum.

The site needs to be contacted. The headquarter is in USA.

APVO Corporation / Viadeo.com
530 Bush St. Suite 403
San Francisco, CA 94108
USA


Demonstration of the issue: https://youtu.be/1-h0hv1K0QI

Their twitter account is not very active.
https://twitter.com/Viadeo_EN/with_replies
Ah! The French account is active
https://twitter.com/Viadeo/with_replies

We can start there and eventually We need to find a front-end developer.
Summary: [Tech Evangelism] http://pr.viadeo.com/es/ can be scrolled past width to reveal whitespace → pr.viadeo.com shows whitespace on the right for small viewports (css issue)
Whiteboard: [3.0-Daily-Testing] → [3.0-Daily-Testing] [country-us] [css] [contactready]
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Priority: -- → P5
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.