FritzBox/AVM latest 7.25 firmware web interface

For support with specific websites

Moderator: trava90

Forum rules
Please always mention the name/domain of the website in question in your topic title.
Please one website per topic thread (to help keep things organized). While behavior on different sites might at first glance seem similar, they are not necessarily caused by the same.

Please try to include any relevant output from the Toolkit Error Console or the Developer Tools Web Console using the following procedure:
  1. Clear any current output
  2. Navigate or refresh the page in question
  3. Copy and paste Errors or seemingly relevant Warnings into a single [ code ] block.
nostril
Apollo supporter
Apollo supporter
Posts: 41
Joined: 2015-01-30, 14:40

FritzBox/AVM latest 7.25 firmware web interface

Unread post by nostril » 2021-03-15, 15:06

AVM/FritzBox 7530 with new 7.25 firmware.
Pale Moon 29.1.0, clean virgin Linux standalone.

After upgrading to latest firmware all tickboxes are missing and disfunctional.
The same is happening in latest Basilisk.

Pale Moon:
fritz_palemoon.png
Expected:
fritz_firefox.png


HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv=content-type content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="private, no-transform" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="x-rim-auto-match" content="none" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimal-ui" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta http-equiv="cleartype" content="on">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/css/rd/logos/logo_fritzDiamond.png" />
<link rel="apple-touch-startup-image" href="/css/rd/logos/logo_fritzDiamond.png">
<style>
@font-face {
font-family: 'AVM';
src: url('/css/rd/fonts/metaWebProBold.woff') format('woff');
font-weight: bold;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: url('/css/rd/fonts/sourcesanspro.woff') format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
src: url('/css/rd/fonts/sourcesansproBold.woff') format('woff');
}
@font-face {
font-family: 'Hack';
font-style: normal;
font-weight: 400;
src: url('/css/rd/fonts/hack.woff') format('woff');
}
html, input, textarea, keygen, select, button {
font-family: 'Source Sans Pro', Arial, sans-serif;
font-size: 100%;
}
.blue_bar_title,
.logoArea {
font-family: 'AVM', 'Source Sans Pro', Arial, sans-serif;
}
.monospace {
font-family: 'Hack', monospace;
}
</style>

<link rel='stylesheet' type='text/css' href="/css/rd/login.css"/>
<title>
FRITZ!Box
</title>
</head>
<body>
<script>
var gNbc = false,
config = {"gu_type":"release","GUI_IS_POWERLINE":false,"GUI_IS_REPEATER":false,"isDebug":false,"language":"en"};
</script>
<script src="/js/browser.js"></script>
<script src="/js/avmcore.js?lang=en"></script>
<script src="/js/directPageCall.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/box-login.js"></script>
<script src="/js/login.js?lang=en"></script>
<script>
var data = {" --- REMOVED by nostril, got too big ---"};
if (gNbc) {
data.nbc = true;
}
function localInit() {
"use strict";
window.history.replaceState({}, '', '/');
html.blueBarHead({
"type": "login",
title: data.bluBarTitle,
parent: document.body
});
login.init(data);
}
localInit();
</script>
</body>
</html>

Sorry, didn't figure out how to attach the html in a more sensible manner.

New Tobin Paradigm

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by New Tobin Paradigm » 2021-03-15, 15:16

I don't know what you expect anyone to do with this.

User avatar
jobbautista9
Keeps coming back
Keeps coming back
Posts: 780
Joined: 2020-11-03, 06:47
Location: Philippines
Contact:

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by jobbautista9 » 2021-03-15, 15:18

HTML code should be placed inside code tags.

Unfortunately, HTML alone is not enough. You will also need to include the external CSS, fonts, images, and JavaScript files.
Image

merry mimas

XUL add-ons developer. You can find a list of add-ons I manage at http://rw.rs/~job/software.html.

Mima avatar by 絵虎. Pixiv post: https://www.pixiv.net/en/artworks/15431817

Image

nostril
Apollo supporter
Apollo supporter
Posts: 41
Joined: 2015-01-30, 14:40

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by nostril » 2021-03-15, 15:27

New Tobin Paradigm wrote:
2021-03-15, 15:16
I don't know what you expect anyone to do with this.
I don't expect anything. But as I don't exactly know what you need and how to provide it, I posted what I though might be helpful.
If it isn't, so be it.
Let's forget about it, who needs tickboxes in router settings anyway.

New Tobin Paradigm

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by New Tobin Paradigm » 2021-03-15, 15:30

Maybe you should have stuck with your stock firmware which normally doesn't have the web2.0 bells and whistles cause it is designed to you know.. work. Never trust web based firmware to an open source group.. With rare exception they are proponents of the monoculture of bullshit.

nostril
Apollo supporter
Apollo supporter
Posts: 41
Joined: 2015-01-30, 14:40

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by nostril » 2021-03-15, 16:40

Sorry that I just stuck to the stock firmware update 7.25 which is pushed by AVM in Germany/Switzerland since March 11.
And it comes with bells and whistles included and it does you know.. not work.

https://avm.de/service/downloads/?product=fritzbox-7530

Let's leave it there, I can work around it, no problem.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35402
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by Moonchild » 2021-03-15, 17:02

Then you should let AVM know that their firmware "upgrade" caused this issue. If you work around it they probably won't be aware something is wrong, and it will never improve (and likely just get worse with the next upgrade)
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

New Tobin Paradigm

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by New Tobin Paradigm » 2021-03-15, 17:06

So this is what they are actually shipping as stock.. Wow. If it was me I'd get a different router and tell Fritz to fuck off lol.

User avatar
back2themoon
Moon Magic practitioner
Moon Magic practitioner
Posts: 2358
Joined: 2012-08-19, 20:32

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by back2themoon » 2021-03-15, 20:52

They know about it. They have good support so hopefully they'll fix it. We'll see in the next update.
Last edited by back2themoon on 2021-03-15, 20:54, edited 2 times in total.

New Tobin Paradigm

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by New Tobin Paradigm » 2021-03-15, 20:54

I hope you are correct.

User avatar
back2themoon
Moon Magic practitioner
Moon Magic practitioner
Posts: 2358
Joined: 2012-08-19, 20:32

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by back2themoon » 2021-03-15, 20:56

nostril wrote:
2021-03-15, 15:06
After upgrading to latest firmware all tickboxes are missing and disfunctional.
You should also report it to AVM and everyone else who uses their (excellent) routers should do the same.

nostril
Apollo supporter
Apollo supporter
Posts: 41
Joined: 2015-01-30, 14:40

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by nostril » 2021-03-16, 12:11

AVM Support has replied within a day. The answer is disappointing, did expect better from them.

''Please understand that we can only offer support for the most common browsers.''

OpenWrt firmware to the rescue.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35402
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by Moonchild » 2021-03-16, 13:28

OpenWRT for the win.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
Gordon Dry
Fanatic
Fanatic
Posts: 121
Joined: 2014-10-14, 19:54
Location: Germany

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by Gordon Dry » 2021-03-23, 13:02

back2themoon wrote:
2021-03-15, 20:52
They know about it. They have good support so hopefully they'll fix it. We'll see in the next update.
Could you please provide a link to the information that makes you post this?

User avatar
Gordon Dry
Fanatic
Fanatic
Posts: 121
Joined: 2014-10-14, 19:54
Location: Germany

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by Gordon Dry » 2021-03-23, 13:12

nostril wrote:
2021-03-15, 15:06
After upgrading to latest firmware all tickboxes are missing and disfunctional.
On Windows 10 those tiny tickboxes are not disfunctional, they're just difficult to hit.

User avatar
back2themoon
Moon Magic practitioner
Moon Magic practitioner
Posts: 2358
Joined: 2012-08-19, 20:32

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by back2themoon » 2021-03-23, 13:50

Gordon Dry wrote:
2021-03-23, 13:02
back2themoon wrote:
2021-03-15, 20:52
They know about it. They have good support so hopefully they'll fix it. We'll see in the next update.
Could you please provide a link to the information that makes you post this?
A link to what?

1. My personal message/report to them about the issue? No.
2. That they have good support? That's a personal opinion, I can't link that. I could link to my post, but it's just above.
3. A link to their next update? I cannot link to the future.

User avatar
Gordon Dry
Fanatic
Fanatic
Posts: 121
Joined: 2014-10-14, 19:54
Location: Germany

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by Gordon Dry » 2021-03-23, 14:24

@back2themoon:
Yeah, you're right. The fact that I was slightly pissed about that new "feature" of the FritzOS update made my brain slightly disfunctional. Like the tickboxes on Linux *duck*

User avatar
Loppetz
Newbie
Newbie
Posts: 3
Joined: 2020-11-01, 12:48

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by Loppetz » 2021-04-02, 10:42

I know nothing about web development but after comparing the site in PM and FF it seems part of some CSS rules aren't obeyed? Specifically these pseudo elements (the "::after" element also isn't shown in PM's HTML code of the page compared to FF).
If someone with a bit more knowledge could find the actual reason maybe writing another bug report with the cause would yield a better result instead of just saying it doesn't work. Worth a try at least.

Code: Select all

.mainContent input[type="radio"]::after {
    background-image: url(/css/rd/icons/ic_radio.svg);
}
.mainContent input[type="radio"]::after {
    border-radius: 50%;
}
.mainContent input[type="checkbox"]::after, .mainContent input[type="radio"]::after {
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 1.125rem 1.125rem;
    content: "";
    cursor: pointer;
    display: block;
    height: 1.125rem;
    position: absolute;
    top: .185rem;
    width: 1.125rem;
}
::selection {
    background: #8fdaff;
}
::selection {
    background: #8fdaff;
}
Anyway, I was able to fix it some other way by using Greasemonkey (Stylish would also work but I don't have that installed). You may need to adjust the @include line however.
The styling doesn't look like the original should but at least it works.

Code: Select all

// ==UserScript==
// @name        FritzBox checkboxes fix
// @namespace   FB CSS
// @include     http://192.168.178.1/
// @version     1
// @grant       GM_addStyle
// ==/UserScript==


GM_addStyle('.mainContent input[type="checkbox"], .mainContent input[type="radio"] {height: 1.125rem !important; width: 1.125rem !important;}')
console.log("Fritzbox script executed");
Attachments
Fritzbox_fixed.png

User avatar
Gordon Dry
Fanatic
Fanatic
Posts: 121
Joined: 2014-10-14, 19:54
Location: Germany

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by Gordon Dry » 2021-04-02, 12:46

Loppetz wrote:
2021-04-02, 10:42
Specifically these pseudo elements
That is a good point. Pale Moon only obeys to official web standards, no experimental silicon valley bs.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35402
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: FritzBox/AVM latest 7.25 firmware web interface

Unread post by Moonchild » 2021-04-02, 13:52

Using all the info above I've analysed this problem:

As far as I know we follow the CSS spec where pseudo-elements were defined.
This is yet another "Chrome-ism" treating everything as a generic container, specifically form fields like <input>. This is another side effect of us following the spec like the infamous <button> issue (which is also an input element that isn't a container).

The issue here:
  1. ::before and ::after render inside a container, and
  2. <input> can not contain other elements.
Pseudo-elements can only be defined (are only supported) on container elements, because the way they are rendered is within the container itself as a child element. Input can not contain other elements hence they're not supported.

If you ask me, if a browser does display these two pseudo-elements on non-container elements, it's a bug and non-standard (non-conformant) behaviour that should be corrected. However in the case of Chrome that normally means it will never be corrected and they will just wait until their steel grip makes the behaviour permissible.

The W3C specification text explicitly talks about document tree content, which input elements and other elements that cannot have content by definition, don't have -- so there's no place to insert these pseudo-elements and as a result they are not rendered.
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.
Radio buttons can not have content, so cannot have pseudo-elements rendered inside that content.

There are plenty of working methods to custom-style radio buttons; what Fritz has done here is just something that is a webkit/chrome quirk and otherwise undefined behaviour.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

Locked