# (Observation) more fun with FireFox and Chrome display of web pages

**URL:** https://discourse.nodered.org/t/observation-more-fun-with-firefox-and-chrome-display-of-web-pages/22526
**Category:** Dashboard
**Created:** [2 March 2020 21:28 UTC](https://discourse.nodered.org/t/observation-more-fun-with-firefox-and-chrome-display-of-web-pages/22526 "2020-03-02T21:28:58Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [2 March 2020 21:28 UTC](https://discourse.nodered.org/t/observation-more-fun-with-firefox-and-chrome-display-of-web-pages/22526/1 "2020-03-02T21:28:58Z")

</div>

While playing with CSS and stuff, I found _another_ disparity between FF and Chrome on how they display web pages.

Two CSS buttons.

```auto
[{"id":"8d09f358.cc5c4","type":"ui_template","z":"1d85b106.5dfcd7","group":"2452ebe2.f30164","name":"Up","order":5,"width":"2","height":"1","format":"<button ng-mousedown=\"send({payload: 'down'})\" ng-mouseup=\"send({payload: 'up'})\"><i class=\"material-icons\"> volume_up </i></button>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":140,"y":180,"wires":[["26653ac7.751afe"]]},{"id":"1cf491d1.c1c4fe","type":"ui_template","z":"1d85b106.5dfcd7","group":"b4f878dc.dd30f","name":"Up","order":5,"width":"2","height":"1","format":"\n<style>\n.button {\n background-color: #097479;\n border: none;\n color: white;\n padding: 15px 32px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n margin: 4px 2px;\n cursor: pointer;\n \n box-shadow: none !important;\n width: 100% !important;\n height: 100% !important;\n margin: 0px !important;\n min-width: 0px !important;\n min-height: 0px !important;\n white-space: nowrap;\n text-transform: uppercase;\n font-weight: 500;\n font-size: 14px;\n \n transition: background-color 0.1s;\n\n}\n\nbutton:hover {\n background-color: #0b8f95;\n}\n\nbutton:active {\n background-color: #ff0000;\n}\n\n</style>\n<button ng-mousedown=\"send({payload: 'down'})\" ng-mouseup=\"send({payload: 'up'})\"><i class=\"material-icons\"> volume_up </i></button>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":170,"y":510,"wires":[["14dc521f.fb0b1e"]]},{"id":"2452ebe2.f30164","type":"ui_group","z":"","name":"Audio","tab":"39b306a2.96619a","order":1,"disp":true,"width":"5","collapse":false},{"id":"b4f878dc.dd30f","type":"ui_group","z":"","name":"Audio2","tab":"39b306a2.96619a","order":2,"disp":true,"width":"5","collapse":false},{"id":"39b306a2.96619a","type":"ui_tab","z":"","name":"TV remote control","icon":"dashboard","order":45,"disabled":false,"hidden":false}]

```

Though there are 3 in the screen shots, take it as the first one is done twice for the up/down and the second one is all by itself on the web page.  
Audio and Audio2

FF - after a refresh and deploy. No buttons pressed.

![Screenshot from 2020-03-03 08-14-03](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/a/2acf663bfb805326464376be22dabe6fe8edb4ad.png)

After pressing a button:

![Screenshot from 2020-03-03 08-14-08](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/66e00e183e9b95fff445b636b33fec8f72487bd1.png)

See how it changes size.

Chrome: no change.

Now the first button pressed.

![Screenshot from 2020-03-03 08-14-15](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/a/3ae572d4cdf35fa602105a7f83f1c2fa5fd702da.png)

(Though it is the "second" button.)  
That is the first button of the code I posted.

Ok, this is getting confusing in what I am saying. I just got up.  
Thing is: There seems to be a _bug_ with how FF displays buttons with CSS, compared to Chrome.

This is probably of no use to anyone, but just to _get it out there_ of this observed _problem_.  
It sort of had me thinking I was going nuts (more than I already am) with what I was seeing.  
Buttons changing size.

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [2 March 2020 23:13 UTC](https://discourse.nodered.org/t/observation-more-fun-with-firefox-and-chrome-display-of-web-pages/22526/2 "2020-03-02T23:13:01Z")

</div>

Make sure that caching has been turned off.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [2 March 2020 23:28 UTC](https://discourse.nodered.org/t/observation-more-fun-with-firefox-and-chrome-display-of-web-pages/22526/3 "2020-03-02T23:28:58Z")

</div>

Thanks.

Can I disable caching for specific IP addresses?  
(Semi rhetorical)

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [2 March 2020 23:33 UTC](https://discourse.nodered.org/t/observation-more-fun-with-firefox-and-chrome-display-of-web-pages/22526/4 "2020-03-02T23:33:51Z")

</div>

You turn it off for the browser, not ip.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [2 March 2020 23:36 UTC](https://discourse.nodered.org/t/observation-more-fun-with-firefox-and-chrome-display-of-web-pages/22526/5 "2020-03-02T23:36:00Z")

</div>

Apologies.

I meant turning it off in the browser for a specific IP rather than a general turn off.

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [2 March 2020 23:47 UTC](https://discourse.nodered.org/t/observation-more-fun-with-firefox-and-chrome-display-of-web-pages/22526/6 "2020-03-02T23:47:55Z")

</div>

You turn it off for the browser, not ip.  
See google.

---

<div class="post-metadata">

### Author: ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)
#### Post date: [3 March 2020 05:53 UTC](https://discourse.nodered.org/t/observation-more-fun-with-firefox-and-chrome-display-of-web-pages/22526/7 "2020-03-03T05:53:36Z")

</div>

Both Chrome and Firefox have an option to disable the HTTP cache while the developer tools are open. It's hidden in the dev tool's settings after you opened them. Search for "_Disable HTTP cache (when toolbox is open)_".

Really useful, and you don't need to disable it globally that way.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [3 March 2020 08:36 UTC](https://discourse.nodered.org/t/observation-more-fun-with-firefox-and-chrome-display-of-web-pages/22526/8 "2020-03-03T08:36:56Z")

</div>

As I was researching this (again) I remember that if I use PRIVATE BROWSING, caching is not going to happen.

In private browsing (FF) the buttons still change size.

(More work to be done here when I get time)

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [2 April 2020 08:37 UTC](https://discourse.nodered.org/t/observation-more-fun-with-firefox-and-chrome-display-of-web-pages/22526/9 "2020-04-02T08:37:15Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
