User styles are not applied to iframes

Bug #1031059 reported by Arturo Torres Sánchez on 2012-07-30
20
This bug affects 4 people
Affects Status Importance Assigned to Milestone
Fogger
Medium
Unassigned

Bug Description

I'm using a user style for Google products (it basically makes the black top bar dissapear). It works e.g. in Google Search, Google Reader, Google+, Google Maps, but not in Gmail, because it uses an iframe to display the page.

I've tested this same user style in Midori and it works fine.

Owais Lone (loneowais) on 2012-07-30
Changed in fogger:
status: New → Triaged
importance: Undecided → Medium
Onilton Maciel (oniltonmaciel) wrote :

One thing I noticed Fogger font size and appearance is not the same that I can see in firefox or chromium. Maybe solving this will at least provide some solution in getting a prettier display for google products.

Jacob Winski (winski) wrote :

This is by CSS-design. CSS in a document does not apply to an iframe inside that document. This is a CSS design decision.

This does not mean that Fogger should not recursively go through all frames inside a webpage and apply CSS to each frame.

Whatever Frogger decides to do, there is a way out right now: Javascript.

Lets say you wanted the following CSS done to the frame "canvas_frame":
.myclass { background-color: "#ffffff"; }

Do the following in Javascript:
var doc = document.getElementById('canvas_frame');
var firstmyclass = doc.getElementsByClassName('myclass')[0]
firstmyclass.style.backgroundColor="#ffffff";

If there is more than one myclass, you will want to recurively go through doc.getElementsByClassName('myclass') and apply the backgroundColor.

So, the implementation in Midori (where CSS is applied to iframes) is wrong?

I will try the Javascript.

On Thu, Sep 20, 2012 at 10:19 AM, Jacob Winski
<email address hidden>wrote:

> This is by CSS-design. CSS in a document does not apply to an iframe
> inside that document. This is a CSS design decision.
>
> This does not mean that Fogger should not recursively go through all
> frames inside a webpage and apply CSS to each frame.
>
> Whatever Frogger decides to do, there is a way out right now:
> Javascript.
>
> Lets say you wanted the following CSS done to the frame "canvas_frame":
> .myclass { background-color: "#ffffff"; }
>
> Do the following in Javascript:
> var doc = document.getElementById('canvas_frame');
> var firstmyclass = doc.getElementsByClassName('myclass')[0]
> firstmyclass.style.backgroundColor="#ffffff";
>
> If there is more than one myclass, you will want to recurively go
> through doc.getElementsByClassName('myclass') and apply the
> backgroundColor.
>
> --
> You received this bug notification because you are subscribed to the bug
> report.
> https://bugs.launchpad.net/bugs/1031059
>
> Title:
> User styles are not applied to iframes
>
> Status in Fogger:
> Triaged
>
> Bug description:
> I'm using a user style for Google products (it basically makes the
> black top bar dissapear). It works e.g. in Google Search, Google
> Reader, Google+, Google Maps, but not in Gmail, because it uses an
> iframe to display the page.
>
> I've tested this same user style in Midori and it works fine.
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/fogger/+bug/1031059/+subscriptions
>

--
—Arturo Torres Sánchez

Alba Mendez (jmendeth) wrote :

It is unclear wether if *your* (the user) CSS should apply recursively.
It's OK, but you have to find a way to tell Fogger or Webkit that you want that behaviour.

But never, NEVER a browser should apply a webpage CSS to the iframes.
If Midori does that, it is not standards-compilant.

To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers