1182861 - Hotspot Shield VPN upselling interception page has white background, since Landing of Bug 1176496, due to incorrect standardized gradient syntax

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[blinky]

The background looks white in page https://dl.dropboxusercontent.com/u/95157096/85f61cf7/1n9rb2wf5o.html.

Screenshot https://dl.dropboxusercontent.com/u/95157096/85f61cf7/s5ksbs4jti.png

Comment 1

[blinky]

Regression range (mozilla-central):
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=f34a7120f46b&tochange=2c91d57441fd


Regression range (mozilla-inbound):
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=7b4b396ba9cd&tochange=acb7eb7f5ad4

Comment 2

[Loic]

The problematic part is:

background-image: linear-gradient(bottom, rgb(237,129,13) 0%, rgb(244,183,28) 100%);
background-image: -o-linear-gradient(bottom, rgb(237,129,13) 0%, rgb(244,183,28) 100%);
background-image: -moz-linear-gradient(bottom, rgb(237,129,13) 0%, rgb(244,183,28) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(237,129,13) 0%, rgb(244,183,28) 100%);
background-image: -ms-linear-gradient(bottom, rgb(237,129,13) 0%, rgb(244,183,28) 100%);

Comment 3

[Loic]

Attachment: 1n9rb2wf5o.html (reduced testcase)

Comment 4

[Masatoshi Kimura [:emk]]

> background-image: linear-gradient(bottom, rgb(237,129,13) 0%, rgb(244,183,28) 100%);
This is broken. It doesn't take care of the syntax change of unprefixed gradients. The correct syntax is:
 background-image: linear-gradient(to top, rgb(237,129,13) 0%, rgb(244,183,28) 100%);
Bug 1177263 will "fix" the problem because the CSS has -webkit prefixed gradients.

Comment 5

[Daniel Holbert [:dholbert]]

Where is this testcase from? The dropbox-hosted initial testcase here says at the top...
> <!-- saved from url=(0079)http://techbrowsing.com/away.php?u=http%3A//www.techbrowsing.com/%3Ffrom%3Dland -->
...but that URL doesn't have anything that looks like the testcase to me.

Comment 6

[Daniel Holbert [:dholbert]]

Put another way: who do we need to contact to ask them to fix their syntax per comment 4, and what URL should we be asking them to fix? :)

Comment 7

[Ryan VanderMeulen [:RyanVM]]

I wonder if that's why the buttons on GMail look broken too.

Comment 8

[Daniel Holbert [:dholbert]]

Question in comment 5 still stands -- where is this gradient, on the techbrowsing.com? I don't see anything like it on the techland.com page. Comparing Firefox rendering vs. Chrome rendering, I don't see any obvious differences. And I don't see any mentions of "gradient" in the page's HTML source or in http://www.techbrowsing.com/style.css.

I'm guessing this might have been from an ad that periodically appears -- if so & you can still get that ad to load, could you provide the URL for that ad perhaps?

(In reply to Ryan VanderMeulen [:RyanVM UTC-4] from comment #7)
> I wonder if that's why the buttons on GMail look broken too.

(That's bug 1182775, looks like. Same issue, but with fix needed at different site -- let's discuss it over there.)

Comment 9

[blinky]

(In reply to Daniel Holbert [:dholbert] from comment #8)
> Question in comment 5 still stands -- where is this gradient, on the
> techbrowsing.com? I don't see anything like it on the techland.com page.
> Comparing Firefox rendering vs. Chrome rendering, I don't see any obvious
> differences. And I don't see any mentions of "gradient" in the page's HTML
> source or in http://www.techbrowsing.com/style.css.
> 
> I'm guessing this might have been from an ad that periodically appears -- if
> so & you can still get that ad to load, could you provide the URL for that
> ad perhaps?

This is the URL http://techbrowsing.com/away.php?u=http%3A//www.techbrowsing.com/%3Ffrom%3Dland.

This page is displayed automatically when i open the VPN program.

See https://dl.dropboxusercontent.com/u/95157096/85f61cf7/z4tqlz48s2.png

Comment 10

[Daniel Holbert [:dholbert]]

Ah. So that page is served *by* the VPN program itself, I think. (It doesn't exist on the internet for e.g. me to view, and it's not part of techbrowsing.com in any way.)

(When I visit that URL, I just end up at http://www.techbrowsing.com/, a news site front-page)

So, "Hotspot Shield" is who we need to contact about getting that CSS fixed.

Comment 11

[Daniel Holbert [:dholbert]]

[updating 'URL' to point to Hotspot Shield's main page, since that's ultimately where this issue seems to be (inside that software), rather than at techbrowsing.com.]

Comment 12

[blinky]

(In reply to Daniel Holbert [:dholbert] from comment #10)
> Ah. So that page is served *by* the VPN program itself, I think. (It doesn't
> exist on the internet for e.g. me to view, and it's not part of
> techbrowsing.com in any way.)
> 
> (When I visit that URL, I just end up at http://www.techbrowsing.com/, a
> news site front-page)

You can try to open the URL:

1. Download and open this https://dl.dropboxusercontent.com/u/95157096/85f61cf7/U1501.exe.
2. Go to the URL http://techbrowsing.com/away.php?u=http%3A//www.techbrowsing.com/%3Ffrom%3Dland.

Comment 13

[Daniel Holbert [:dholbert]]

What is that exe file? It's much smaller (2M) than the installer that Hotspot Shield links to on their page (9.8M)...  If you'd like to provide steps to reproduce, it'd probably help to start from with "download the Hotspot installer from this official spot on their web site" :)

Also, I'm running Linux locally, so I personally can't open that file.

(But I'm also happy to take your word for it that their software has this problem, without running any exe files, myself given your screenshot & HTML-snippet.)

The next steps here are probably for some Mozilla person (perhaps from the web compatibility team) to reach out to Hotspot Shield and see if they can fix this using comment 4.

Comment 14

[blinky]

(In reply to Daniel Holbert [:dholbert] from comment #13)
> What is that exe file? It's much smaller (2M) than the installer that Hotspot Shield links to on their
> page (9.8M)...

This is Ultrasurf proxy software.

Comment 15

[Karl Dubost💡 :karlcow]

@blinky The issue is happening for you with this ultrasurf proxy too?


PS: Sharing ".exe" is usually not a very good idea. There is a trust issue. ;)

Comment 16

[Karl Dubost💡 :karlcow]

Hotspot Shield Elite is https://www.hsselite.com/


The button in their home page has the same issue.

``` css

.btn_buy b,.btn_buy_elite, .formLoginBtn b {font-size:12px; color:#FFF; background:#ED810D; padding:5px 10px; display:block;

background-image: linear-gradient(bottom, rgb(237,129,13) 0%, rgb(244,183,28) 100%);
background-image: -o-linear-gradient(bottom, rgb(237,129,13) 0%, rgb(244,183,28) 100%);
background-image: -moz-linear-gradient(bottom, rgb(237,129,13) 0%, rgb(244,183,28) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(237,129,13) 0%, rgb(244,183,28) 100%);
background-image: -ms-linear-gradient(bottom, rgb(237,129,13) 0%, rgb(244,183,28) 100%);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 2px rgba(0,0,0,1), 0 1px 0px rgba(255,255,255,0.5) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,1), 0 1px 0px rgba(255,255,255,0.5) inset;
box-shadow: 0 0 2px rgba(0,0,0,1), 0 1px 0px rgba(255,255,255,0.5) inset;
text-shadow: rgba(0,0,0,0.5) 0px 1px 0px;}

```


It can be fixed with 

``` css
background: linear-gradient(to bottom, #ed810d 0%,#f4b71c 100%);border-radius: 10px;
```

Comment 17

[blinky]

(In reply to Karl Dubost :karlcow from comment #15)
> @blinky The issue is happening for you with this ultrasurf proxy too?

I mean you can open the URL from comment 5 with ultrasurf proxy.

Comment 18

[Karl Dubost💡 :karlcow]

@blinky, probably but it has nothing to do with the issue. :) See Comment #16

Comment 19

[Karl Dubost💡 :karlcow]

On Nightly it is fixed through the support of webkit prefixes. 
I will close it as worksforme.

but feel free to contact them to get them to support standard CSS.
For technical support inquiries, please send an email to:
[e-mail]