Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Website Firefox goed, Safari en Chrome problemen.

bewerkt wo 23 dec 2015 in XHTML, XML Posts: 24
Ik heb op deze site een probleem. In firefox draait alles zo als het moet zijn, Safari loopt goed, totdat je bij de Footer komt (de social media buttons). De buttons zijn niet zichtbaar en op het moment van hovering wordt de hele background uit zijn verband getrokken. In chrome werken de socialmedia buttons wel normaal en blijft daar de achtergrond in model, alleen als je bij over-ons komt, laat de achtergrond zich als het ware herhalend zien bij het naar beneden scrollen en wanneer je omhoog scrollt wordt de eigenlijke achtergrond heel smal en nemen de foto's van de slider er de plaats in. Ik heb in IE niet kunnen testen, dus daar weet ik niet hoe eea loopt. Op een Android telefoon heb je bij portfolio dat de achtergrond grotendeels verdwijnt en vervangen wordt door de foto's van de slider. Tot slot verdwijnt bij het kijken op de iPad, bij "over ons" de achtergrond weer. (in zowel Chrome als Safari) en zijn er vooral bij Safari problemen met de social media buttons in de footer.

Wie kan mij vertellen wat er fout gaat.

Dank
nuet editt: url tussen tags gezet

Reacties

  • PMPosts: 732
    Even in firefox gekeken:

    Er zit zowiezo een error in je script ( Placeholders.init is not a function ).
    Scrolldown werkt niet, zo ook de rechter arrow down dus kom niet handig bij het menu.

    Bij over ons, zou ik de tekst naast de afbeelding zetten scheelt scroll werk.
    Ook de foto zou ik veranderen "zonder laptop" want die witte background komt niet tot zijn recht, of even google laptop.png

    Je contact iets meer aandacht geven, focus / hover en misschien een validatie op je velden.

    Firefox geeft geen afbeeldingen weer in je portfolio.
    Chrome geeft ook geen afbeeldingen weer.

    Maar als eerste zou ik de javascript fout oplossen, kan zijn dat dan al andere fouten worden hersteld.

    If it's not fun, you're not doing it right!
  • PMPosts: 879
    wat ik even heb kunnen opmerken is dat ik in Safari geen problemen zie zoals jij die hierboven beschrijft.
    Zo zie ik het in Safari:
    image

    Wat betreft die achtergrond Over Ons: daarin valt me op dat de tekst Over ons, waarom doe ik wat ik doe in Safari niet zichtbaar is en in Chrome wel.
    In de console even gekeken en die achtergrond staat nu zo in de css:

    background-image: url(Achtergrond1_onepage.jpg);
    Op de een of andere manier wordt ie niet geladen, echter als je hem forceert (!important) dan wel:

    background-image: url(Achtergrond1_onepage.jpg) !important;
  • Ik dank jullie voor je reaktie, het klopt dat teksten en afbeeldingen niet zijn wat het moet zijn, ik loop alleen met de achtergrond vast. Ik safari is alles goed en ook goed leesbaar, alleen laat hij in chrome bij over ons de achtergrond repeterend zien. De eigenlijke achtergrond is nog niet eens helemaal afgewikkeld en hij begint opnieuw. Als ik van beneden naar boven scroll haal hij de hele achtergrond weg. Als ik bij safari over de onderste buttons ga zie ik dit: geen buttons ( in firefox zijn ze zwart en als je er overheen gaat licht groen) en de donkergrijze achtergrond springt dan vaak in vlakken over de bovenliggende foto. ik heb !important ingegeven, maar dit geeft helaas geen verbetering. mijn kennis is helaas nog niet zo groot ik ben een week of 4 geleden begonnen met html, dus wat betreft de fout in het java script hoe kan ik zoiets oplossen.

    Nogmaals dank
  • Het vreemde is dat als ik de afbeelding vast zet: {background-attachment: fixed;} doet het probleem zich voor dat de images van de slider er als achtergrond doorkomen in Chrome. als ik ze mee laat lopen met het scrollen dus niet fixed is er niets aan de hand. Ik zie dat Nuet in Safari geen enkel probleem heeft waar ik dus niet anders dan een effen grijs vlak heb zonder aanduiding van social media icoontjes. en wanneer ik over de icoontjes hover breidt de grijze achtergrond zich ongeorganiseerd naar bovenuit.
  • PMPosts: 732
    Ik denk dat je een z-index probleem hebt in je css. Of je werkt ergens met floating die niet wordt afgesloten.
    Tevens zul je voor veel browsers je stylsheet moeten aanpassen, dit is naemlijk je probleem omtrent de verschillende weergaves en werken betreffende animation en de browsers.

    Ik heb zelf een dergelijk website rvdesigns, en zover ik weet gaat het in iedere browser goed.
    Maar het is niet eenvoudig dat kan ik je wel vermelden!

    If it's not fun, you're not doing it right!
  • PMPosts: 879
    kun je eens je complete root inzippen en hier als bijlag posten?
  • Ik heb een zipp file met daarin de complete site. Ik heb de free template gedownload van: http://themes.alessioatzeni.com/html/brushed/ en hier de nodige aanpassingen aan gedaan. ( ik zou willen dat ik zoiets naar 5 weken al kon bouwen, maar helaas) Alleen heb ik het orgineel van Brushed ook nog en hiermee heb ik in Safari hetzelfde probleem als met de site die ik verbouwd heb. Chrome werkt hij wel goed in, maar in het orgineel zijn geen afbeeldingen die gefixed zijn. Tevens een printscreen waarin je ziet dat er geen buttons zijn in safari, het beeld heeft zich hier zelf al weer gecorrigeerd ( dat doet het na enkele seconden)

    Ik dank weer voor de moeite

    zip
    zip
    One_page.zip
    3M
    Schermafbeelding 2014-11-22 om 15.13.24.png
    2880 x 1800 - 2M
  • PMPosts: 732
    http://themes.alessioatzeni.com/html/brushed/ hier zitten geen javascript errors ?
    Dus ergens met stylen heb je iets fout gedaan.
    If it's not fun, you're not doing it right!
  • bewerkt za 22 nov 2014
    PMPosts: 879
    2 dingen wat mij opvallen:

    1. De jQuery core staat onderaan in je index.html
    Die moet in de head komen.
    2. in je main.css: ( ergens rond regel 696)

    .page-alternate {
    background-image: url(Achtergrond1_onepage.jpg)!important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 100px 0;
    /*position: relative;*/ /* deze disablen */
    z-index: 99;
    }
    Haal die position relative eruit.

    Kijk eens of Chrome nu die achtergrond laadt bij stukje Over Ons
  • Ik ben een leek op dit gebied, maar als ik inspecteren doe in Chrome, krijg ik 3 errors. Of doe ik iets helemaal fout?
    Schermafbeelding 2014-11-22 om 19.19.50.png
    2880 x 1800 - 3M
  • PMPosts: 879
    Ik heb nu getest in Chrome en Safari en resultaat op basis van wat ik hierboven beschreef:

    Chrome laadt de achtergrond bij Over Ons en Safari geeft nu ook 3 images weer net boven de socialmedia icons wat er eerst ook niet waren
  • Nuet ik dank je voor je reaktie, ik heb gedaan wat je gezegd hebt, maar helaas werkt het niet. Als ik de image plaats en hem mee laat scrollen is er niets aan de hand, maar als ik hem fix heb ik een probleem. Misschien zeg ik iets doms, maar boven aan de index.html zie ik allemaal zaken staan die lijkt mij betrekking hebben op het geschikt maken voor verschillende uitvoeringen van IE. Ik zie hier geen Safari en Chrome bij staan, kan het hem hier inzitten?

    Nogmaals dank
  • Ik heb nogmaals de zaken gewijzigd zoals je aangaf, om te voorkomen dat ik een fout had gemaakt. Maar helaas blijft voor mij het resultaat hetzelfde. ik heb ik de bijlagen iets printscreens toegevoegd van de wijzigingen.
    Schermafbeelding 2014-11-22 om 20.24.32.png
    2880 x 1800 - 1M
    Schermafbeelding 2014-11-22 om 20.24.59.png
    2880 x 1800 - 1M
    Schermafbeelding 2014-11-22 om 20.25.06.png
    2880 x 1800 - 1M
  • bewerkt za 22 nov 2014
    PMPosts: 879
    Bekijk hem even hier, ik heb een clone hier neergezet van jouw webpagina: webprofis.nl/test/peter/
    Ik zie hem hier wel goed!
    Wat zie jij nu? Nog steeds geen achtergrond bij Over ons?

    De url webprofis.nl/test/peter/ heb ik ook getest met browserstack.com/ in zowel Chrome 38 en Safari 5.1 en beiden geen enkel probleem te zien
  • bewerkt zo 23 nov 2014
    PMPosts: 732
    Paar kleine aanpassingen om het werk van neut af te maken.

    regel 120 staat nu:


    <img src="_include/img/slider-images/arrow.png" alt="Scroll down"/>
    Veranderen in:


    <a class="volgende" href="#impressies"><img src="_include/img/slider-images/arrow.png" alt="Scroll down"/></a>

    regel 129 staat nu:


    <a id="nextsection" href="#work"><i class="font-icon-arrow-simple-down"></i></a>
    Veranderen in:


    <a class="volgende" id="nextsection" href="#impressies"><i class="font-icon-arrow-simple-down"></i></a>

    In de main.js op regel 270 staat nu:


    $('#nexsection').on('click', function(){
    Veranderen in:


    $('.volgende').on('click', function(){

    Regel 352 staat nu


    <div class="span6 profile">
    <div class="image-wrap">
    Veraderen in:


    <div class="profile">
    <div class="image-wrap span6">

    Regel 360 staat nu:


    <h3 class="profile-name">Peter Steintjes</h3>
    Veranderen in:


    <div class="span6">
    <h3 class="profile-name">Peter Steintjes</h3>

    Regel 377 staat nu:


    </div>
    <!-- End Profile -->
    Veranderen in:


    </div>
    </div>
    <!-- End Profile -->

    Tevens in de main.css op regel 565 staat:


    background: url(../img/logo.png) no-repeat;
    Zorg dat deze image bestaat zodat je logo ook in responsive wordt weergegeven, en zodra de header bar (menu) active is.

    Tip:
    Als je geen twitter gebruikt laad dan ook deze javascripts niet, dit geld ook voor andere applicaties.
    If it's not fun, you're not doing it right!
  • Ik dank jullie weer voor de moeite. ik heb op webprofis.nl/test/peter/ gekeken, maar ik blijdf nog steeds verschillen zien tussen Safari, Firefox en Chrome. onder heb ik 2 screenshots toegevoegd 1 van Firefox ( die goed is ) en 1 van Chrome die jullie dus goed zien via dit adres, maar die bij mij nog steeds fout gaan. Ik begin er steeds minder van te begrijpen zeker nu dit bij jullie wel goed te zien is, maar bij mij nog steeds fout. Wel het ik gemerkt dat als ik de de socialicons helemaal onder aan de pagina laat faden ipv rotate het probleem voor Safari is opgelost. Als ik bij "Over ons" de achtergrond laat scrollen is het achtergrond probleem bij Chrome ook opgelost, maar zodra ik de achtergrond weer op fixed zet vertoond de achtergrond weer zijn happeringen.

    Ik dank jullie nogmaals voor de moeite, ik pas morgen de adviezen van Rene aan.
    Schermafbeelding 2014-11-23 om 15.46.00.png
    2880 x 1800 - 3M
    Schermafbeelding 2014-11-23 om 15.46.42.png
    2880 x 1800 - 2M
  • PMPosts: 879
    Ja, ik weet het verschil ook niet te verklaren. Ik zie ook wel dat jij die achtergrond bij Chrome niet heb; kan het te maken hebben met het feit dat jij Chrome op een Mac hebt draaien? Ik heb Windows
    In ieder geval ik heb deze url ( webprofis.nl/test/peter/) ook getest bij Browserstack in Chrome en Safari onder Windows 7 en daar waren ze allebei zonder problemen...Ik heb dus niet getest onder Mac OS
    Overigens ik heb zelf een tijd geleden een probleem gehad met een webpagina die onder alle browsers (ook Safari), mits Windows exact hetzelfde uitzag , maar degene die een Mac hadden zagen complete verschuivingen....tja...dat zijn vaak hele lastige dingen om te zoeken waar hem dat in zit
  • PMPosts: 732
    Verandern eens dit:


    .page-alternate {
    background-image: url(Achtergrond1_onepage.jpg)!important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 100px 0;
    /*position: relative;*/
    z-index: 99;
    }
    In:


    .page-alternate {
    background-image: url(Achtergrond1_onepage.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 100px 0;
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: 99;
    -webkit-transform: tarnslateZ(0);
    }
    If it's not fun, you're not doing it right!
  • bewerkt zo 23 nov 2014
    PMPosts: 879
    Hieronder 6 snapshots:

    1e: mijn eigen pc; Windows 7 en Chrome 39
    2e: mijn eigen pc; Windows 7 en Safari 5.1
    3e: via website van Browserstack getest; Windows 7 en Safari 5.1
    4e: via website van Browserstack getest; Windows 7 en Chrome 38
    5e: via website van Browserstack getest; OS Yosemit en Chrome 38
    6e: via website van Browserstack getest; OS Yosemit en Safari 8

    Merk op: eigen pc W7 en Safari 5.1. H2 niet weergegeven; via browserstack W7 en Safari 5.1 gekozen H2 wel
    weergegeven...
    eigen_win7_chrome39.png
    1678 x 1020 - 374K
    eigen_win7_saf5.1.png
    1683 x 1048 - 342K
    browserstack_w7_saf5.1.png
    1680 x 1045 - 578K
    win7chrome38browserstack.png
    1678 x 1046 - 583K
    yosemite_chrome.png
    1682 x 1050 - 536K
    yosomite_saf8_browserstack.png
    1674 x 1044 - 580K
  • Ik dank jullie weer voor alle moeite. Ik werk inderdaad op een Apple. Heb de wijzigingen doorgevoerd. Ik heb het idee dat het geheel er sneller en stabieler van is geworden. De achtergrond is op deze manier mooier gepositioneerd en is gefixeerd zonder dat er gaten vallen, alleen is hij nu zo gefixeerd dat de pagina's boven Over ons niet meer bereikbaar zijn, zoals de slider en impressies. De menu balk schuift netjes over de foto, maar zodra deze beneden is is het scrollen gebeurd.

    Nogmaals dank
    Schermafbeelding 2014-11-24 om 09.27.52.png
    2880 x 1800 - 2M
  • PMPosts: 732
    Zet het gene wat je hebt aangepast eens online, dan kunnen we meekijken in de settings etc.
    Op een foto kan ik geen stylesheets bekijken ;)
    If it's not fun, you're not doing it right!
  • Ik dank jullie weer voor de moeite. Ik heb hem op mijn adres weer online gezet. Ik heb dus alleen regel 702 weer op

    position: scroll;
    gezet i.pv. fixed, dit omdat fixed dus de heleboel blokkeerd.

    Nogmaals dank.
  • PMPosts: 732
    Probeer alleen dit eens:


    .page-alternate {
    background-image: url(Achtergrond1_onepage.jpg)!important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 100px 0;
    position: relative;
    z-index: 99;
    -webkit-transform: tarnslateZ(0);
    }
    If it's not fun, you're not doing it right!
  • PMPosts: 732
    Hier spreken ze over het zelfde probleem, en ook de zelfde oplossing:
    http://www.kriesi.at/support/topic/problem-with-scrollspy-single-page-navigation-on-chrome-and-ios/
    If it's not fun, you're not doing it right!
  • Ik dank je weer voor je reactie. Het schijnt dus inderdaad een probleem te zijn dat zich voordat in Chrome maar dan alleen bij Apple. De aangedragen oplossingen zijn nog niet ????nduidend. Wat bij de 1 werkt, werkt bij de ander niet. Ik laat het nu even rusten, vroeg of laat zal zich de oplossing wel aandienen.

    Ik dank jullie alle bij voor jullie moeite.
  • PMPosts: 879
    @Peter
    ik zal de testurl op dit domein verwijderen
Login of Registreer om te reageren.